Dodecahedron

by Richard Hunter

HTML

<div class='container'>
    <div class='pentagon'></div>
</div>

SCSS

.container {
    
    padding : 200px;
}
.pentagon {
    position: relative;
    width: 54px;
    border-width: 50px 18px 0;
    border-style: solid;
    border-color: red transparent;
    background : green;
}
.pentagon:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -85px;
    left: -18px;
    border-width: 0 45px 35px;
    border-style: solid;
    background : yellow;
    border-color: transparent orange blue;
}