制作一个带有图像的真正弯曲的容器

让我首先说我不是一个真正的开发人员，我是一名设计师，但有时我开发工作的开发人员真的很忙或者只是懒得真的让设计变得生动起来。因此，我把自己置于寻找资源的位置等等。我在寻求制作带有图像的弯曲容器的帮助......一个可编辑的容器，意思是说，可以像曲线的直接变化一样，如果它的里面，出来，像图片浏览：制作一个带有图像的真正弯曲的容器

https://i.stack.imgur.com/fFUMi.png

https://i.stack.imgur.com/MwGYh.png

现在，我将曲线的PNG与曲线一起传递给他，但正如每个人都应该知道的那样，这对响应性，质量等都是不利的。我还告诉过他关于SVG的事，但他告诉我，如果这是真的或者只是懒惰，我不可能再次知道。我感谢任何帮助。

来源

2017-05-03 Paula

嗨 - 你可以编辑你的问题，包括你试过的代码吗？我不确定为什么PNG不好？您可能需要使用不同的图像等使用媒体查询来处理不同大小的屏幕。 – WiredPrairie

可以尝试只使用保持所述图像的容器上伪元素（因为图像可以没有伪元件）

像这样的第一个例子：（可以修改高度，宽度，边界半径和位置来满足您的需求）

.curved-image { 
 
\t position: relative; 
 
\t width: 350px; 
 
\t margin-bottom: 20px; 
 
\t overflow: hidden; 
 
} 
 

 
.curved-image:after { 
 
\t content: ''; 
 
\t display: block; 
 
\t width: 160%; 
 
\t height: 100%; 
 
\t border-radius: 50%; 
 
\t position: absolute; 
 
\t top: 60%; 
 
\t left: -10%; 
 
\t background-color: green; 
 
} 
 

 
.curved-image img { 
 
\t display: block; 
 
}

<div class="curved-image"> 
 
    <img src="http://placehold.it/350x150"> 
 
</div>

第二个例子是有点棘手做逆用这种方法，如果有人想加入到这个答案

来源

2017-05-03 14:51:26 StefanBob

制作一个带有图像的真正弯曲的容器

回答

相关问题