css - 元素的复杂剪辑路径/SVG 背景

Question

我需要创建如下图所示的内容:

地点:

• 黑色背景代表页面上的一个元素，header例如
• 青色背景代表黑色背景下的整体背景
• 黑色背景元素必须被视为单个元素，因为它上面会覆盖一个图案，该图案必须留在黑色元素的边界内，而不是出现在它之外<

这很容易，只需用一些 :pseudo-elements 创建黑色元素即可。 ，但是它上面的模式使整个事情陷入停顿。

我一直在阅读 clip-path支柱。但我不确定我是否能够创建像这样的复杂剪辑(或者它对我来说似乎很复杂)。

整个东西将在 iOS 应用程序上使用，到目前为止，这个 clip-path 属性似乎与它兼容。另外要提的是，黑色元素将具有固定高度，但必须是其父元素的100% 宽度。我想我会逃脱使用 svg相反，但由于它需要固定高度，因此在拉伸(stretch)时看起来会变形。

---

更新:右侧必须保持相同的宽度，我想也许在 <g> 中使用两个 svgs标记并绝对定位它们，一个将是流动的，另一个将具有固定宽度。但是，我不确定 filter 是否将覆盖它们，或者如果 filter完全可以应用于 <g>标记，在 svg 中

下面的 SVG 示例:

body {
  background: cyan;
}
svg {
  min-width: 100%;
  height: 80px;
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 452 170" preserveAspectRatio="none">
  <rect x="1" y="14" width="438" height="142" />
  <path d="M0 0v170h452V0H0zM448 166H4V4h444V166z" />
  <rect y="14" width="438" height="142" />
</svg>

非常感谢任何提示或指示!

Answer 1

使用掩码可能是更好的解决方案？

#test {
  font-size: 100px;
  position: relative;
  display: inline-block;
  margin: 40px;
}

#test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
  background: repeating-linear-gradient(45deg, lightblue, tomato 100px);
  -webkit-mask-image: linear-gradient(red, red),
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(transparent, transparent);
  -webkit-mask-size: 5% 100%, 5% 100%, 100% 5%, 100% 5%, 80% 80%;
  -webkit-mask-position: left top, right top, center top, center bottom, center center ;
  -webkit-mask-repeat: no-repeat;
}

body {
  background-color: lightgreen;
}

<div id="test">Transparent frame</div>

固定宽度的方法

用固定的像素值替换边框的宽度尺寸。对内部矩形使用 calc。

body, html {
    width: 90%;
  position: relative;
}

#test {
  font-size: 100px;
  position: relative;
  display: inline-block;
  margin: 40px;
  width: 100%;
  height: 40%;
}

#test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
  background: repeating-linear-gradient(45deg, lightblue, tomato 100px);
  -webkit-mask-image: linear-gradient(red, red),
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(red, red), 
                    linear-gradient(transparent, transparent);
  -webkit-mask-size: 10px 100%, 10px 100%, 100% 10px, 100% 10px, calc(100% - 40px) calc(100% - 40px);
  -webkit-mask-position: left top, right top, center top, center bottom, center center ;
  -webkit-mask-repeat: no-repeat;
}

body {
  background-color: lightgreen;
}

<div id="test">Transparent frame</div>

一个椭圆例子

#test {
  font-size: 100px;
  position: relative;
  display: inline-block;
  margin: 40px;
  border-radius: 50%;
}

#test:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  bottom: 0px;
  z-index: -1;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, lightblue, tomato 100px);
  -webkit-mask-image: radial-gradient(ellipse, red 55%, transparent 56%, transparent 65%, red 66%);
}

body {
  background: lightgreen;
}

<div id="test">Transparent frame</div>