Вверху - желаемый результат, ниже - результат svg
Поскольку Microsoft Edge не может распознать свойство clip-path: polygon, я где-то читал, что мне следует использовать образ SVGчтобы сделать трюк.
Вот мой оригинальный код:
-webkit-clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
Вот моя попытка заставить его работать с Edge:
clip-path: url('#myclippath');
И svg nextв div:
<svg width="0" height="0">
<clipPath id="myclippath" clipPathUnits="objectBoundingBox">
<polygon points="0, 0, 1.0, 0, 0.75, 1.0, 0, 1.0"/>
</clipPath>
</svg>
Проблема в том, что форма SVG применяется к фоновому изображению, а не к самому div. Что делает его довольно бесполезным.
Можно ли применить форму SVG к элементу div? Если нет, есть ли альтернатива jQuery (хотя я бы предпочел придерживаться CSS)?