С трудом понимаю, как эта штука прошла мимо меня. Претендует на очередное переосмысление иконок в вёрстке! Туда, к картинкам, SVG в HTML, SVG в CSS, символам...
И я о функции CSS shape(). Для
clip-path.Например, треугольник будет выглядеть так:
.shape1 {
clip-path: shape(from 0% 0%, line to 100% 0%, line to 50% 100%, close);
}Выглядит просто? Ну так это потому что и определения простые. Вы только посмотрите, что сделали в CodePen (в смысле, в компании) для демонстрации мощи функции: https://codepen.io/t_afif/pen/JoovLam
Если честно, я пока не видел конверторов SVG в shape(), но уверен, они должны появиться.
Или это отличный шанс кому-нибудь блеснуть знаниями!
Впрочем, в Firefox пока поддержки нет :(
#css #shape #svg