用css在图像内的曲线

Question

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

Answer 1

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

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

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

<div></div>