JSFiddle - React, Tailwind, and code Playground

by zicai

HTML

<div class="triangle">
    <div id="triangle-topleft"></div>
    <div id="triangle-topright"></div>
    <div id="triangle-bottomleft"></div>
    <div id="triangle-bottomright"></div>
</div>
<div id="parallelogram"></div>
<div id="trapezoid"></div>
<div id="star-six"></div>
<div class="hexagon"></div>
<div class="pentagon"></div>
<div class="octagon"></div>

CSS

.triangle div {
    display:inline-block;
}
/*左上三角形*/
 #triangle-topleft {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}
/*右上三角形*/
 #triangle-topright {
    width: 0;
    height: 0;
    border-top: 100px solid red;
    border-left: 100px solid transparent;
}
/*左下三角形*/
 #triangle-bottomleft {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-right: 100px solid transparent;
}
/*右下三角形*/
 #triangle-bottomright {
    width: 0;
    height: 0;
    border-bottom: 100px solid red;
    border-left: 100px solid transparent;
}
/*平行四边形*/
 #parallelogram {
    width: 150px;
    height: 100px;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    background: red;
}
/*梯形*/
 #trapezoid {
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0px;
    width: 100px;
}
/*六角星*/
#star-six {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
    position: relative;
}
#star-six:after {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
    position: absolute;
    content: "";
    top: 30px;
    left: -50px;
}
/*六边形*/
.hexagon {
    width: 100px;
    height: 55px;
    margin-top: 60px;
    background: red;
    position: relative;
}
.hexagon:before {
    content: "";
    position: absolute;
    top: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 25px solid red;
}
.hexagon:after {
    content: "";
    position: absolute;
    bottom: -25px; 
    left: 0;
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 25px...