CSS 3形状：倒圆角“类似隧道的样式”

Question

我正在寻找创建一个像隧道一样的div，它具有倒圆的边框

如您所见，它具有从左到右的“扩展隧道效应”。 理想情况下，方格背景是透明的，但如果不可能的话，我可以使背景色为纯色。

谁能帮助我创建此css3形状？ 希望我可以玩一个jsfiddle？

谢谢！

Answer 1

这可以使用:before和:after伪元素来创建：

• 背景颜色带有box-shadow颜色，使形状的顶部和底部透明

• 曲线的border-radius如下所示：

  （红色区域是透明的）

  

完整的例子

 div { height: 300px; width: 200px; position: relative; overflow: hidden; } div:before { top: -60px; border-bottom: solid #EEE; border-right: solid #EEE; border-radius: 0 0 60% 0; box-shadow: 50px 10px 0 60px #F90; } div:after { bottom: -60px; box-shadow: 50px 10px 0 60px #F90; border-radius: 0 60% 0 0; border-top: solid #EEE; border-right: solid #EEE; } div:before, div:after { content: ''; position: absolute; width: 100%; height: 160px; right: 0; border-width: 3px; } 

 <div></div>