我试图在站点标题的底部创建一个不对称的锯齿图案,看起来像这样(除了锯齿是不对称的):
我尝试了一些使用(线性渐变)的纯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控制对我来说是一个新的领域。
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>
你可以试试这个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>
UPDATE
不对称的锯齿形图案:
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>