我正在寻找一种方法来创建 flex 的顶部和底部边框,就像这张图片中的 div
一样。我已经尝试了这里提到的一些方法,但这取决于在主要 div
之上使用带有 border-radius
的白色 div
但正如你可以在这个图像中看到显示背景图像应该是透明的。
最佳答案
这可以使用 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>
关于css - 顶部和底部 flex 边框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27646180/