Shapes by CSS

by Ivan Gerasimenko

HTML

<div class="triangle-diagonal-dl margin-10"></div>
<div class="cross margin-10"></div>
<div class="corner margin-10"></div>
<div id="star-five"></div>

CSS

.margin-10 {
    margin: 10px;
}

.triangle-diagonal-dl {
    width: 0px;
    height: 0px;
    border-bottom: 25px solid green;
    border-right: 50px solid transparent;
}
/* CROSS */
.cross {
    width: 50px;
    height: 10px;
    background: green;
    margin-top: 30px;
}
.cross:before {
    content: "";
    display: block;
    width: 10px;
    height: 50px;
    background: green;
    position: relative;
    top: -20px;
    left: 20px;
}

/* CORNER */
.corner {
    width: 50px;
    height: 10px;
    background: green;
    margin-top: 30px;
}
.corner:before {
    content: "";
    display: block;
    width: 10px;
    height: 50px;
    background: green;
}

/* STAR FIVE */
#star-five {
   margin: 50px 0;
   position: relative;
   display: block;
   color: green;
   width: 0px;
   height: 0px;
   border-right:  30px solid transparent;
   border-bottom: 21px  solid green;
   border-left:   30px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#star-five:before {
   border-bottom: 24px solid blue;
   border-left: 9px solid transparent;
   border-right: 9px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: 20px;            /* SET TO THE RIGHT PLACE */
   left: -30px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);
   
}
#star-five:after {
   position: absolute;
   display: block;
   color: red;
   top: 3px;
   left: -34px;
   width: 0px;
   height: 0px;
   border-right: 30px solid transparent;
   border-bottom: 21px solid red;
   border-left: 30px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}