使用 ::after 伪元素重复 SVG 模式作为边框的剪辑路径答案

【问题标题】：Repeating SVG Pattern as a Clip Path for Border using ::after pseudo element使用 ::after 伪元素重复 SVG 模式作为边框的剪辑路径
【发布时间】：2019-02-19 21:35:47
【问题描述】：

我正在尝试在网站标题的底部创建一个不对称的锯齿图案，看起来像这样（除了锯齿是不对称的）：

sawtooth border example

我尝试了一些使用 (linear-gradient) 的纯 CSS 方法，但无济于事。

我可以创建一个重复模式，但也不能使它成为一个剪辑路径，这样它会切掉标题的背景颜色（粉红色）以显示下面的正文背景。

https://codepen.io/rasterisk/pen/rZrKNO

body {
  background-color: tomato;
  margin: 0;
}
.header {
  position:relative;
  height: 100px;
  background-color: pink;
  overflow: hidden;
  margin: 0;
}

.header svg {
  position: absolute;
  bottom: 0;
}

div::after { /*this doesn't work*/
  content:'';
  height:12px;
  width: 100%;
  position: absolute;
  background-color: green;
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
  bottom: 0;
  margin: 0;
}

<body>
  <div class="header">
    <svg width="3000" height="11" xmlns="http://www.w3.org/2000/svg">
      <defs>
      <clipPath id="svgPath">
        <pattern id="Pattern" x="0" y="0" width="20" height="12" patternUnits="userSpaceOnUse">
          <path fill="" d="M-131-167l-144.42-104.93s-6.87-4.59-9.07 3.17c-2.11 7.48-13.93 83.86-16.69 101.76H-131zM-354-50l-.14 111s15.54-94.28 17.65-101.76c2.19-7.77 9.07-3.17 9.07-3.17L-183 61V-50h-171zM0 0v11.61S2.08 1.73 2.33.92C2.6.07 3.04.5 3.04.5L20 11.61V0H0z"/>
        </pattern>
      </clipPath>
    </defs>
    <rect fill="url(#Pattern)" width="2400" height="12"/>
   </svg>
 </div>
</body>

任何帮助将不胜感激。这种程度的 SVG 控制对我来说是新领域。

【问题讨论】：

如果你要使用一个模式，你需要一个蒙版，并且一个模式不能是蒙版或剪辑路径的子级，所以蒙版有一个由模式填充的矩形.
@RobertLongson 感谢您提供此信息。在过去的 24 小时里，我发现了很多关于 SVG Pattern 和 clipPath 的约束。我也尝试使用 CSS 定位模式填充，但无济于事。我喜欢 SVG 的能力，但学习所有细节是一项严肃的研究。

标签： css svg mask clip-path

【解决方案1】：

您可以尝试这个仅使用 css 的解决方案：css 线性渐变

body {
  background-color: tomato;
  margin: 0;
}
.header {
  position:relative;
  height: 100px;
  background-color: pink;
  overflow: hidden;
  margin: 0;
}

.header svg {
  position: absolute;
  bottom: 0;
}

div::after{
  content:"";
  display:block;
  position:absolute; 
  bottom:0;
  width:100%;
  height:1.2em;
  background-image:-webkit-linear-gradient(45deg, pink 25%, transparent 26%, transparent 75%, pink 75%),
				  -webkit-linear-gradient(135deg, pink 25%, tomato 26%,tomato 75%, pink 75%);
background-image: linear-gradient(45deg, pink 25%, transparent 26%, transparent 75%, pink 75%),
                  linear-gradient(135deg, pink 25%, tomato 26%, tomato 75%, pink 75%);
background-size:36px 36px;}
}

<body>
  <div class="header">
 </div>
</body>

更新

不对称锯齿图案：

body {
  background-color: tomato;
  margin: 0;
}
.header {
  position:relative;
  height: 100px;
  background-color: pink;
  overflow: hidden;
  margin: 0;
}

.header svg {
  position: absolute;
  bottom: 0;
}

div::after{
  content:"";
  display:block;
  position:absolute; 
  bottom:0;
  width:100%;
  height:25px;
background-image: linear-gradient(45deg,  tomato 50%, pink 50% , pink 100%),
                  linear-gradient(135deg,  tomato 50%, pink 50% , pink 100%);
background-size:25px 25px;}
}

<body>
  <div class="header">
 </div>
</body>

【讨论】：

感谢您的解决方案。棘手的部分是我需要锯齿效果是不对称的。感谢您的回复！

【解决方案2】：

body {
  background-color: tomato;
  margin: 0;
}
.header {
  position:relative;
  height: 100px;
  background-color: pink;
  overflow: hidden;
  margin: 0;
}

.header svg {
  position: absolute;
  bottom: 0;
  background-color: tomato;//set your svg background color as your body color
}

div::after { /*this doesn't work*/
  content:'';
  height:12px;
  width: 100%;
  position: absolute;
  background-color: green;
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
  bottom: 0;
  margin: 0;
}

<body>
  <div class="header">
    <svg width="3000" height="11" xmlns="http://www.w3.org/2000/svg">
      <defs>
      <clipPath id="svgPath">
        <pattern id="Pattern" x="0" y="0" width="20" height="12" patternUnits="userSpaceOnUse">
          <path fill="" d="M-131-167l-144.42-104.93s-6.87-4.59-9.07 3.17c-2.11 7.48-13.93 83.86-16.69 101.76H-131zM-354-50l-.14 111s15.54-94.28 17.65-101.76c2.19-7.77 9.07-3.17 9.07-3.17L-183 61V-50h-171zM0 0v11.61S2.08 1.73 2.33.92C2.6.07 3.04.5 3.04.5L20 11.61V0H0z"/>
        </pattern>
      </clipPath>
    </defs>
    <rect fill="url(#Pattern)" width="2400" height="12"/>
   </svg>
 </div>
</body>

【讨论】：