css - 顶部和底部 flex 边框

Question

我正在寻找一种方法来创建 flex 的顶部和底部边框，就像这张图片中的 div 一样。我已经尝试了这里提到的一些方法，但这取决于在主要 div 之上使用带有 border-radius 的白色 div 但正如你可以在这个图像中看到显示背景图像应该是透明的。

Answer 1

这可以使用 svg。

为了提高响应能力，移除 svg 的 width 和 height 属性，添加 viewBox="0 0 400 150" 然后尝试更改 #image 的 width 和 height，svg 将响应其 宽度 和高度。

Demo on Fiddle展示响应形状。

^{Browser support for this approach - 这适用于除 IE8 以外的所有浏览器。}

body {
  background: teal;
}
#image {
  width: 600px;
  height: 300px;
  position: relative;
  background: url(http://lorempixel.com/600/300);
}
svg {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="image">
  <svg width="400" height="150">
    <path opacity="0.6" fill="red" d="M0,10 Q0,0 10,0 Q195,40 390,0 Q400,0 400,10 Q390,75 400,140 Q400,150 390,150 Q195,100 10,150 Q0,150 0,140 Q10,75 0,10" />
  </svg>
</div>