How can i make polygon using css and html ?

to make polgon using css and html there are three wayes:

1- using canvas

2- using svg

3 div {clip-path:polygon(x1 y1, x2 y2, x3 y3);}

#polygon{

width:100px;

height:55px;

background:blue;

position:relative;

}

#polygon: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 blue;

}

#polygon: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 solid blue; 

}