Возможно ли с помощью css3 трансформировать блок как на картинке?

Question

[owl-cat]

Или как такое сделать ?

Answer 1

[Виталий Инчин ☢]

Через CSS можно, с использованием псевдоэлемента.

Comments

[owl-cat]

Я всегда так делал, но меня интересует есть ли возможность с помощью трансформации сделать такое к примеру matrix.

[A K]

Можно пример глянуть? Вы должны понимать, что на фоне, позади нашего элемента, возможно, будет размещена картинка.

[Виталий Инчин ☢]

owl-cat: это из разряда "А вот так сделать нельзя". CSS-transform работает с ребрами, да углами, а на вашем примере видно, что деформация должна быть посередине.

[Виталий Инчин ☢]

Symphony: что-то типа такого, только нужно середину доделать ( через :before), но из без нее суть понятна:jsfiddle.net/cLboo3Lq/2

[A K]

Виталий Инчин: поэтому лучше использовать svg, тем более автор хочет использовать css3 transform, поддержка которого намного хуже, чем svg path.

[Виталий Инчин ☢]

Symphony: я ничего не имею против svg. это ТЗ возмущается :)

[A K]

Виталий Инчин: тз - тех задание, тс -topic starter :)

[Виталий Инчин ☢]

Symphony: гугл говорит, тс - украинский оператор мобильной связи третьего поколения :D

[A K]

Виталий Инчин: это смотря чем вы увлекайтесь.