Есть картинка карточки с градиентом и обрезанным уголком, полученным с помощью 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>
Но проблема в том, что я не могу сделать так, чтобы обрезанный угол иметь фиксированный размер, независящий от размера всей картинки.