CSS
.vuejs{
width: 300px;
height: 300px;
top:calc(50% - 150px);
left:calc(50% - 150px);
position: absolute;
}
.triangle{
width: 150px;
height: 300px;
float:left;
}
.blue:before, .white:before, .green:before{
top: 0;
content: "";
width: 0;
height: 0;
display: block;
position: absolute;
}
.blue:before {
z-index: -5;
left: 60px;
border-left: 90px solid transparent;
border-right: 90px solid transparent;
border-top: 155px solid #35495E;
}
.white:before {
left: 115px;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 60px solid #FFF;
}
.green:before {
z-index: -10;
position: absolute;
right: 0px;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-top: 260px solid #41B883;
}
