How to make a corner on a block using CSS?

Question

css

It is necessary to draw a block with an arrow on the left in css. The difficulty is with the left arrow.
It is important that after creation it is possible to set box-shadow as in the example.

Answer 1

The magic of pseudo-elements and transformations

Answer 2

Generate yourself an arrow from a rectangle here, by tilting, rotating and changing the width to get the desired angle . And then you can apply box-shadow to it, as to a normal element. But its values, of course, will have to be selected). Will be supported in IE9+.

Answer 3

#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
In general, there is a whole set on Habré))
habrahabr.ru/post/126207