我有一个卡片图像,带有带有修剪角的渐变,使用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>但问题是,无论卡片大小如何,我都无法使这个剪裁的角落具有固定的大小.