css - 制作一个真正 flex 的容器，里面有图像

Question

首先让我说我不是真正的开发人员，我是一名设计师，但有时我工作的开发人员真的很忙或只是懒得真正让设计栩栩如生......所以，我把自己放在寻找资源的位置等。我正在寻求帮助制作一个内部有图像的 flex 容器......一个可编辑的容器，这意味着，一个人可以像曲线的方向一样改变，如果它在里面，在外面，就像图像一样这里:

/image/fFUMi.png

/image/MwGYh.png

现在，我将带有曲线的图像的 PNG 传给他，但正如每个人都应该知道的那样，这对响应速度、质量等方面都是不利的。我还告诉他有关 SVG 的信息，但他告诉我，我不可能再不知道它是真的还是懒惰。感谢您的帮助。

Answer 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>

如果有人想补充这个答案，第二个例子有点棘手，要用这种技术做逆运算