CSS 3形状：倒圆角＆＃34;隧道式样式＆＃34;

Question

我希望创建一个类似隧道的div，它有倒圆圈

正如您所看到的，它具有“不断扩大的隧道效应”。从左到右。理想情况下，方格背景是透明的，但如果这是不可能的，我可以使它具有坚实的背景颜色。

任何人都可以帮我创建这个css3形状吗？希望有一个我可以玩的jsfiddle？

谢谢！

Answer 1

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

• 背景颜色以box-shadow颜色提供，允许形状的顶部和底部透明

• 使用border-radius创建曲线，如下所示：

  （红色区域是透明的）

  

完整示例

＆＃13;

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;