Страницы

Поиск по вопросам

вторник, 13 ноября 2018 г.

Вёрстка блока с 2-мя треугольниками

Доброго времени суток! Помогите разобраться, каким образом с помощью css можно сверстать данный блок, что бы избежать вставки картинок. Поробывалось делать с помощью before, after но получился только треугольник с правой стороны.
Заранее спасибо


Ответ

Без вставки картинок, но с парой лишних блоков и псевдоэлементов:
.d1 { height: 300px; width: 300px; margin: 35px 20px 0 0; background: green; position: relative; } .d1:before { content: ""; height: 0; width: 0; position: absolute; top: 0; right: -100px; border-left: 100px solid green; border-top: 150px solid transparent; border-bottom: 150px solid transparent; } .d2 { height: 0; width: 0; background: red; position: relative; } .d2:before { content: ""; height: 0; width: 0; position: absolute; top: 0; left: 280px; border-left: 100px solid red; border-top: 150px solid transparent; border-bottom: 150px solid transparent; } .d2:after { content: ""; height: 0; width: 0; position: absolute; top: 0; left: 260px; border-left: 100px solid green; border-top: 150px solid transparent; border-bottom: 150px solid transparent; } .d3:before { content: ""; height: 30px; width: 100px; position: absolute; top: 0; left: 200px; background: green; } .d3:after{ content: ""; height: 30px; width: 100px; position: absolute; bottom: 0; left: 200px; background: green; }


Комментариев нет:

Отправить комментарий