<分区>
html - css负边框形状
标签 html css background header
我有这样的图片
这是 SVG 格式。我需要将它用作此元素下的标题背景(封面)以及其他应该在标题四舍五入的地方可见的内容。
我不能将它用作包含背景和封面，因为在不同的分辨率下它看起来很糟糕。 我的想法是将此图像切片并像之前和之后一样只使用左侧和右侧。
但也许有人有更好的解决方案。例如，CSS 渐变和背景图片。但是我做了一些测试，我不能将形状设置为透明，或者只填充一部分颜色。
编辑:
我想要 100% 宽度和静态高度，看起来像这样
提前感谢您的任何提示。
SVG 的问题是原始尺寸为 300x91，当我将其设置为 1980px 宽度时，高度太大或曲线不可见。
我不能像以前一样设置白色圆 Angular 层，因为我需要在曲线所在的地方设置透明背景。
最佳答案
试试这个:
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0
}
div {
width: 300px;/*for example*/
margin: 0 auto;/*for example*/
border-top: 30px solid black;
position: relative;
min-height: 500px;/*for example*/
}
div:before {
content: "";
border-radius: 50%;
top: -20px;
z-index: 1;
position: absolute;
left: 0;
right: 0;
border: 25px solid #FFF;
}<div>
</div>您可能需要根据您的要求修改这些值。
关于html - css负边框形状，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50904727/