顶部和底部弯曲的边框

Question

我正在寻找一种方法来创建弯曲的顶部和底部边框,如图div中所示.我已经尝试过这里提到的一些方法,但它取决于在主要顶部使用白色divs,但正如您在此图像中看到的那样,它应该是透明的以显示背景图像.border-radiusdiv

Answer 1

这可以使用svg.

为了响应删除svg的width和height属性,增加viewBox="0 0 400 150"再尝试改变#image的width和height时,svg将对其作出回应width和height.

小提琴演示展示响应形状.

^{浏览器支持这种方法 - 这适用于除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>