Как нарисовать такую фигуру с помощью clip-path?

Question

[timtimIT]

Здравствуйте.

Как нарисовать такую фигуру с помощью clip-path?



По идее должно было получится но нет , вот как делал :

-webkit-clip-path: polygon (0% 0%, 0% 100%, 50% 100%, 100% 0%, 100% 100%)

Answer 1

[Nikolay Talanov]

codepen.io/suez/pen/de0725bc7db7b4b7d18e315ef937bbcc

Comments

[timtimIT]

спасибо!

Answer 2

[Fetur]

Немного запоздал, но гуглиться довольно легко.
https://jsfiddle.net/2kt0uyec/
Вот здесь можно по быстрому накидать, что тебе нужно.
bennettfeely.com/clippy

Comments

[timtimIT]

круто, спасибо!)

[timtimIT]

Привет. Подскажи, можно нарисовать такую фигуру на svg , clip-path polygon не работает в ff...нужно чтобы ширина была 100%

[Fetur]

timtimIT: я конечно не мастер с svg и вообще с ним знаком не очень, но могу пояснить.
FF поддерживает SVG только через url() пока и ваш пример будет выглядеть как-то так.
https://jsfiddle.net/swkzj2ap/
Вообще рекомендую немного почитать про SVG прежде чем его юзать, технология прикольная, но надо въехать. Да и поддержка в браузерах везде разная, без библиотеки не пойдешь.
Почитайте к примеру это
https://css-tricks.com/scale-svg/
https://developer.mozilla.org/ru/docs/Web/SVG