Как с помощью CSS сделать угол на блоке?

Question

[ayapergenov]

Необходимо на css отрисовать блок со стрелкой слева. Затруднение именно с левой стрелкой.
Важно, чтобы после создания можно было задать box-shadow как на примере.

Answer 1

[Евгений Петров]

Магия псевдоэлементов и трансформаций

Comments

[ayapergenov]

Очень круто! Спасибо!

Answer 2

[teotlu]

Сгенерите себе вот здесь стрелочку из прямоугольника, с помощью наклона, поворота и изменения ширины, чтоб получился нужный угол. А дальше сможете к ней применить box-shadow, как к обычному элементу. Но его значения, конечно, придётся подбирать). Поддерживаться будет в IE9+.

Answer 3

[KonstV]

#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

А вообще на хабре целый набор есть ))
habrahabr.ru/post/126207

Comments

[ayapergenov]

Спасибо, видел эту статью. Но не догадался, что можно это применить к данной задаче.