[分享]css两边半圆中间矩形

CSS中的形状实现可以运用各种技巧，在这里我们介绍一种实现两边半圆、中间矩形的方法。

.container{
  position: relative;
  width: 400px;
  height: 200px;
  margin: 50px auto;
  background-color: #eee;
  border-top-left-radius: 100px;
  border-bottom-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 100px;
  overflow: hidden;
}
.container:before, .container:after{
  content: " ";
  position: absolute;
  width: 60px;
  height: 200px;
  background-color: #fff;
}
.container:before{
  left: -30px;
  border-radius: 30px 0 0 30px;
}
.container:after{
  right: -30px;
  border-radius: 0 30px 30px 0;
} 

代码中，我们给容器设置了一个 position:relative，同时设置了高度、宽度和四个圆角。然后使用两个伪元素:before和:after分别生成两个白色的矩形，定位在容器左右两端，并给它们设置上下半圆的拐角。

通过这种方式，我们得到了两边拐角为半圆的矩形，并且把中间部分给遮挡住了。这样，就实现了两边半圆中间矩形的形状效果。