#фишка дня

С трудом понимаю, как эта штука прошла мимо меня. Претендует на очередное переосмысление иконок в вёрстке! Туда, к картинкам, 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