<!-- https://css-tricks.com/examples/ShapesOfCSS/ -->

<div class="bloc">
  <div id="carre"></div>
  <div id="rectangle"></div>
</div>

<div class="bloc">
  <div id="circle"></div>
  <div id="oval"></div>
</div>

<div class="bloc">
  <div id="triangle1"></div>
  <div id="triangle2"></div>
  <div id="triangle3"></div>
  <div id="triangle4"></div>
</div>

<div class="bloc">
  <div id="triangle5"></div>
  <div id="triangle6"></div>
  <div id="triangle7"></div>
  <div id="triangle8"></div>
</div>

<div class="bloc">
  <div id="trapeze"></div>
  <div id="parallelogramme"></div>
</div>

<div class="bloc">
  <div id="etoile1"></div>
  <div id="etoile2"></div>
</div>

<div class="bloc">
  <div id="pentagone"></div>
  <div id="octogone"></div>
  <div id="hexagone"></div>
</div>
.bloc{clear:both; width:100%;}
.bloc div{float:left; margin:10px;}

#carre {
	width: 50px;
	height: 50px;
	background: red;
}

#rectangle {
	width: 100px;
	height: 50px;
	background: red;
}

#circle {
	width: 50px;
	height: 50px;
	background: red;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
}


#oval {
	width: 100px;
	height: 50px;
	background: red;
	-moz-border-radius: 100px / 50px;
	-webkit-border-radius: 100px / 50px;
	border-radius: 100px / 50px;
}

#triangle1{
  width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid red;
}

#triangle2{
  width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid red;
}

#triangle3{
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid red;
	border-bottom: 25px solid transparent;
}

#triangle4{
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid red;
	border-bottom: 25px solid transparent;
}

#triangle5{
	width: 0;
	height: 0;
	border-top: 50px solid red;
	border-right: 50px solid transparent;
}

#triangle6{
	width: 0;
	height: 0;
	border-top: 50px solid red;
	border-left: 50px solid transparent;
}

#triangle7{
	width: 0;
	height: 0;
	border-bottom: 50px solid red;
	border-right: 50px solid transparent;
}

#triangle8{
	width: 0;
	height: 0;
	border-bottom: 50px solid red;
	border-left: 50px solid transparent;
}

#trapeze {
	border-bottom: 50px solid red;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	height: 0;
	width: 50px;
}

#parallelogramme{
  width: 75px;
	height: 50px;
	-webkit-transform: skew(20deg);
	   -moz-transform: skew(20deg);
	     -o-transform: skew(20deg);
	background: red;
}

#etoile1 {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid red;
	position: relative;
}
#etoile1:after {
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid #D00;
	position: absolute;
	content: "";
	top: 15px;
	left: -25px;
}

#etoile2 {
   margin: 25px 0;
   position: relative;
   display: block;
   color: red;
   width: 0px;
   height: 0px;
   border-right:  50px solid transparent;
   border-bottom: 35px  solid red;
   border-left:   50px solid transparent;
   -moz-transform:    rotate(35deg);
   -webkit-transform: rotate(35deg);
   -ms-transform:     rotate(35deg);
   -o-transform:      rotate(35deg);
}
#etoile2:before {
   border-bottom: 40px solid #D00;
   border-left: 15px solid transparent;
   border-right: 15px solid transparent;
   position: absolute;
   height: 0;
   width: 0;
   top: -22.5px;
   left: -32.5px;
   display: block;
   content: '';
   -webkit-transform: rotate(-35deg);
   -moz-transform:    rotate(-35deg);
   -ms-transform:     rotate(-35deg);
   -o-transform:      rotate(-35deg);

}
#etoile2:after {
   position: absolute;
   display: block;
   color: red;
   top: 1.5px;
   left: -52.5px;
   width: 0px;
   height: 0px;
   border-right: 50px solid transparent;
   border-bottom: 35px solid #B00;
   border-left: 50px solid transparent;
   -webkit-transform: rotate(-70deg);
   -moz-transform:    rotate(-70deg);
   -ms-transform:     rotate(-70deg);
   -o-transform:      rotate(-70deg);
   content: '';
}


#pentagone{
    position: relative;
    width: 27px;
    border-width: 25px 9px 0;
    border-style: solid;
    border-color: red transparent;
}
#pentagone:before {
    content: "";
    position: absolute;
    height: 0;
    width: 0;
    top: -42.5px;
    left: -9px;
    border-width: 0 22.5px 17.5px;
    border-style: solid;
    border-color: transparent transparent #B00;
}

#octogone{
	width: 50px;
	height: 50px;
	background: red;
	position: relative;
}

#octogone:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	border-bottom: 15px solid red;
	border-left: 15px solid #FFF;
	border-right: 15px solid #FFF;
	width: 21px;
	height: 0;
}

#octogone:after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	border-top: 15px solid red;
	border-left: 15px solid #FFF;
	border-right: 15px solid #FFF;
	width: 21px;
	height: 0;
}

#hexagone{
	width: 50px;
	height: 22.5px;
	background: red;
	position: relative;
}
#hexagone:before {
	content: "";
	position: absolute;
	top: -12.5px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 12.5px solid red;
}
#hexagone:after {
	content: "";
	position: absolute;
	bottom: -12.5px;
	left: 0;
	width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 12.5px solid red;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.