我有一个使用clip-path
的具有渐变和剪裁角的卡片图像
.card {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, blue, green);
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%, 0 20px);
}
<div class="card"></div>
被裁剪的角落必须有固定的大小,而不管卡片的大小,所以我使用像素来裁剪角落。
但是clip-path
目前对浏览器的支持还不是最好,所以我试着把这个HTML和CSS转换成SVG。
.container {
width: 200px;
height: 200px;
}
<div class="container">
<svg viewBox="0 0 100 100" clip-path="url(#myClip)">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<polygon points="20,0 100,0 100,100 0,100 0,20" fill="url(#grad1)" />
</svg>
</div>
但问题是,我不能使这个裁剪的角落有固定的大小,而不管卡片的大小。
发布于 2018-12-14 00:18:04
在使用SVG mask
的Stack Overflow in Russian的帮助下,我的解决方案是
.container {
width: 200px;
height: 200px;
}
svg {
width: 100%;
height: 100%;
}
<div class="container">
<svg>
<defs>
<mask id="triangle-clip">
<rect x="0" y="0" width="100%" height="100%" fill="#fff" />
<path d="M0,20 v-20 h20 z" fill="#000" />
</mask>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
</linearGradient>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" mask="url(#triangle-clip)" />
</svg>
</div>
发布于 2018-12-13 08:56:50
为了保持它的固定大小,你不能在你的SVG上使用viewBox
。只要剪掉你需要的角,让其他角延伸很长的距离,这样它就可以覆盖你可能需要的任何大小。在下面的示例中,我将剪辑路径扩展到(10000,10000)。
在这里,我们将梯度应用于100% x 100% <rect>
。这是为了使渐变始终缩放以适合屏幕。然后,我们将剪辑路径应用于矩形以获得凹口。
html, body {
height: 100%;
}
.container {
width: 50%;
height: 50%;
}
<div class="container">
<svg width="100%" height="100%">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(0,0,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,255,0);stop-opacity:1" />
</linearGradient>
<clipPath id="clip1">
<polygon points="20,0 10000,0 10000,10000 0,10000 0,20"/>
</clipPath>
</defs>
<rect width="100%" height="100%" fill="url(#grad1)" clip-path="url(#clip1)"/>
</svg>
</div>
https://stackoverflow.com/questions/53742988
复制相似问题