1. Realize double triangles

Implementation principle: use two div elements and set the width and height to 0. It is also realized by setting border value and color.

div{
    width:0;
    height:0;
    //Note that the border left cannot be set here, because it will separate the two triangles
    border-right:20px royalblue solid;
    border-top:10px transparent solid;
    border-bottom:10px transparent solid;
    float:left;//Because block level elements have one row
}

2. Realize parallelogram

div{
    width:100px;
    height:100px;
    background-color:#489ddf;
    transform:skew(160deg); //Tilt function
    margin-left: 100px;//Because when the element tilts, it will find that the element will run out of the body
}

3. Realize isosceles trapezoid

div{
            width: 200px;
            height: 200px;
            border-width: 80px;
            border-color: #489ddf white;
            border-style: solid;
        }

4. Realize Pentagon

We can divide Pentagon into isosceles trapezoid of upper part and triangle of lower part. As long as these two modules are implemented separately, the final effect can be achieved!

Implement the first half
#div1{
    width:100px;
    height:100px;
    border-bottom:50px red solid; //Note the width of the border
    border-top:50px white solid;
    border-left:50px white solid;
    border-right:50px white solid;
}
//Lower half
#div2{
    width:0;
    height:0;
    border-top:100px black solid;
    border-bottom:100px red solid;
    border-left:100px white solid;
    border-right:100px white solid;
}

5. Realize semicircle

div{
    width:100px;
    height:50px;
    background-clolr:#489ddf;
    border-radius:50px 50px 0 0;
}

6: Realize sector

 #div1{
            width: 100px;
            height: 50px;
            border-radius: 50px 50px 0 0;
            background-color: #489ddf;
        }
  #div2{
           width: 0;
           height: 0;
           border-top: 80px #489ddf solid;
           border-right: 50px transparent solid;
           border-left: 50px transparent solid;
        }