CSS 3 形状:倒圆角"tunnel-like style"

CSS 3 Shape: inverted rounded corner "tunnel-like style"

我想创建一个类似隧道的 div,它有倒圆边框

如您所见,它从左到右有一个 'expanding tunnel effect'。理想情况下,方格背景是透明的,但如果那不可能,我也许可以让它与纯色背景一起使用。

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

谢谢!

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