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

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

哪里：

>黑色背景代表页面上的元素,例如标题
>青色背景代表黑色背景下的整体背景
>黑色背景元素必须像单个元素一样对待,因为它上面会有一个图案叠加,它必须保持在黑色元素的边框内,而不是在黑色元素的外部显示

用一些伪元素创建黑色元素是非常容易的,但是在它之上的那个模式已经使整个事物陷入停顿.

我一直在阅读剪辑路径道具.但我不确定我是否能够像这样创建一个复杂的剪辑(或者对我来说似乎很复杂).

整个过程将在iOS应用程序上使用,到目前为止,这个剪辑路径属性似乎与它兼容.
另外要提到的是,黑色元素将具有固定的高度,但必须是其父级的100％宽度.
我认为我会使用svg来逃避,但是因为它需要一个固定的高度,所以当它伸展时它似乎是扭曲的.

更新：
右侧必须保持相同的宽度,我想可能在< g>内部使用两个svgs.标签和绝对位置,一个是流动的,另一个是固定的宽度.但是,我不确定过滤器是否会覆盖它们,或者过滤器是否可以完全应用于< 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>

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

解决方法

可能是一个更好的解决方案与掩蔽？

#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,linear-gradient(transparent,transparent);
  -webkit-mask-size: 5% 100%,5% 100%,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,transparent);
  -webkit-mask-size: 10px 100%,10px 100%,100% 10px,calc(100% - 40px) calc(100% - 40px);
  -webkit-mask-position: left top,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,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>

原文地址：https://www.jb51.cc/css/216059.html