CSS 3 形状：倒圆角“隧道式风格”

Question

我正在寻找创建一个具有倒圆边框的隧道式 div

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

谁能帮我创建这个 css3 形状？希望有一个我可以玩的jsfiddle？

谢谢！

Answer 1

这可以使用 a: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>