用css在图像内的曲线

Question

是否可以，如何在图像顶部和底部制作曲线，请参见图像。我怎样才能用css实现这个目标？

Answer 1

将图像设置为div上的背景图像并使用此技术。在我的例子中，我使用了纯红色。

这里我使用伪元素在顶部和底部创建曲线。请注意，顶部和底部偏移量是每个伪元素高度的一半，边界半径设置为50％。

＆＃13;

＆＃13;

div {
  width:500px;
  height:200px;
  background:red;
  position:relative;
  overflow:hidden;
}
div:after, 
div:before {
  content:'';
  background:white;
  position:absolute;
  top:-10px;
  left:0;
  width:100%;
  height:20px;
  border-radius:0 0 50% 50%;
}
div:after {
  top:auto;
  bottom:-10px;
  border-radius:50% 50% 0 0 ;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;