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

#css #css3 #html5 #scss

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

Заранее спасибо
    

Ответы

Ответ 1

Без вставки картинок, но с парой лишних блоков и псевдоэлементов:



.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;
}