使用CSS创建图片中的曲线

Question

是否可以在图像的顶部和底部制作曲线，如下图所示？如何使用CSS实现此效果？

- Bas

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>

- partypete25