Доброго времени суток!
Помогите разобраться, каким образом с помощью 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;
}
Комментариев нет:
Отправить комментарий