Question

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

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

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

现在，我用曲线传递了图像的PNG但是每个人都应该知道，这对于响应，质量等等都是不好的。我也告诉过他关于SVG的事情，但是他告诉我，如果这是真的或只是懒惰，我不可能再也不知道了。我感谢任何帮助。

Answer 1

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

第一个示例中的内容如下:(您可以根据需要修改高度，宽度，边框半径和位置）

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

如果有人愿意添加这个答案，那么第二个例子对于使用这种技术进行逆转来说有点棘手

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

1 个答案: