css负边框形状

Question

我有这样的形象

这是SVG格式。我需要使用它作为此元素下的标题背景（封面）是其他在标题舍入的地方应该可见的内容。

我无法将其用作包含背景和封面，因为在不同的分辨率下它看起来很糟糕。 我的想法是切割这个图像，并使用前后左右两侧。

但也许某人有更好的解决方案。例如，CSS渐变广告背景图像。但我做了一些测试，我不能将这样的形状设置为透明，或只填充颜色。

编辑： 我喜欢100％宽度的静态高度，看起来像这样 提前感谢任何提示。

SVG的问题是原始尺寸为300x91，当我将其设置为1980px宽度时，高度太大或曲线不可见。

我不能像以前一样设置白色圆形图层，因为我需要在曲线所在的地方使用透明背景。

Answer 1

试试这个：

＆＃13;

＆＃13;

package com.example.android.projectname;

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;

您可能需要根据您的要求修改值。