Как сделать угол на CSS с прозрачным бэкграундом?

Question

[Mike]

Допустим есть блок с текстом внутри
<div><p>Я текст</p></div>

Есть ли решение создать такой угол с прозрачным фоном? =)

Answer 1

[Nikolay Talanov]

1) Самый простой и элегантный - css clip-path: polygon. Сделано за 2 минуты - codepen.io/suez/pen/2a2b9d90bd00d671181906de5311bc8d
Из очевидных минусов - ограниченная поддержка браузерами. Но если вам пофиг на древнее инвалидное говно, то юзайте не раздумывая.
2) Svg clipPath. По сути дела это более геморройная версия первого варианта с некоторыми недостатками (например нельзя юзать %), но зато браузерная поддержка намного шире + можно юзать для каких угодно форм, ибо в основе лежит svg path.
3) Стандартные хаки с помощью :before/:after. Например создаете блок, который сверху имеет прямые углы. Затем :before элемент делаете треугольником слева (ксс трегольники легко гуглятся и даже есть сайт генератор - apps.eky.hk/css-triangle-generator ). А :after блоком справа с закругленным верхним правым углом.
4) Что-нибудь еще.

Comments

[Kovalsky]

Извиняюсь, Firefox 47.0a2 & 45.0.1, нету уголка. Это нормально?

[Nikolay Talanov]

Никита Полевой: скорее всего не поддерживается. Фразу про инвалидные браузеры не стоит понимать прям таки буквально. По caniuse тяжело понять поддержку отдельных частей этого свойства, ибо первая версия с поддержкой url() для svg clipPath появилась давно, а потом уже добавили polygon и прочее.

[Mike]

Никита Полевой: да, норм. Я так и сделал, и плевать на FF =)

[Mike]

Nikolay Talanov: большое спасибо!

Answer 2

[display: block]

codepen.io/anon/pen/vGWqBL

Answer 3

[xmoonlight]

https://habrahabr.ru/post/126207/

Answer 4

[volkod]

можно заюзать вот такой метод с бекграундом с помощью линейного грайдиента background: linear-gradient(-221deg, transparent 83px, red 0px); ие от 10 версии, этот варик юзать надо ток если фон будет не однородный, а если однородный то через бордеры в псевдоэлиментах afer/before