Фон в виде стрелки?

Question

[stepaniwe]

Как на картинке, фон слегка похож на стрелку. Нужен наиболее верный способ

Comments

[Сергей delphinpro]

два белых скошенных (transform:skewx) псевдоэлемента под белым блоком

Answer 1

[Максим Тимофеев]

1 вариант:
div {background: #slegkaPohozNaStrelku; }
2 вариант: картинка на фоне
3 вариант: border-image белая картинка с прозрачностью
4 вариант: треугольный border через псевдоэлементы htmlbook.ru/blog/treugolniki-cherez-css
5 вариант: svg

Answer 2

[Александр Лысенко]

Вот тут разбор вашего вопроса, или уже тут но на русском

Answer 3

[Дмитрий Пыркин]

png

Comments

[stepaniwe]

а адаптивность потом как делать?

[Дмитрий Пыркин]

ну как бы это картинка

Answer 4

[v3shin]

Объединяя два ответа: под контент на белом фоне подложить псевдоэлемент :after и задать ему белые края: верхний и нижний. Левый и правый края сделать прозрачными - тогда получится стрелка наоборот.

Answer 5

[Андрей Верх]

Попробуйте применить CSS маски. Без IE, зато самый правильный способ

htmlbook.ru/blog/maskirovanie-v-css