制作一个非常弯曲的容器，里面有图像答案

【问题标题】：Making a really curved container with image inside制作一个非常弯曲的容器，里面有图像
【发布时间】：2017-10-01 10:38:20
【问题描述】：

首先让我说我不是真正的开发人员，我是一名设计师，但有时我工作的开发人员真的很忙，或者只是懒得真正让设计变得生动......所以，我把自己置于寻找资源的位置等。我在制作一个带有图像的弯曲容器...这里：

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

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

现在，我将带有曲线的图像的 PNG 传递给他，但每个人都应该知道，这对响应、质量等都是不利的。我还告诉了他关于 SVG 的事情，但他告诉我，我不可能再不知道，这是真的还是只是懒惰。感谢您的帮助。

【问题讨论】：

嗨——您能否编辑您的问题以包含您尝试过的代码？我不确定为什么 PNG 不好？您可能需要使用不同的图像等，使用媒体查询来处理不同尺寸的屏幕。

标签： css image svg header containers

【解决方案1】：

您可以尝试在包含图像的容器上仅使用伪元素（因为图像不能具有伪元素）

第一个例子是这样的：（您可以根据需要修改高度、宽度、边框半径和位置）

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

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

.curved-image img {
	display: block;
}

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

如果有人想添加到这个答案中，第二个例子用这种技术做逆向有点棘手

【讨论】：