Les formes en CSS3

Comment créer des formes en CSS3

Pour les triangles

Le but est de créer une div sans largeur ni hauteur, puisqu'elles seront directement déterminées grâce à la bordure de la div

Par exemple, dans le cas d'une flèche vers la droite, la bordure de gauche (border-left) est colorée tandis les autres bordures restes transparentes

#triangle_haut{
        width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-bottom: 50px solid red;
}
 
#triangle_bas{
        width: 0;
	height: 0;
	border-left: 25px solid transparent;
	border-right: 25px solid transparent;
	border-top: 50px solid red;
}
 
#triangle_gauche{
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-right: 50px solid red;
	border-bottom: 25px solid transparent;
}
 
#triangle_droite{
	width: 0;
	height: 0;
	border-top: 25px solid transparent;
	border-left: 50px solid red;
	border-bottom: 25px solid transparent;
}
 
#triangle_h_g{
	width: 0;
	height: 0;
	border-top: 50px solid red;
	border-right: 50px solid transparent;
}
 
#triangle_h_d{
	width: 0;
	height: 0;
	border-top: 50px solid red;
	border-left: 50px solid transparent;
}
 
#triangle_b_g{
	width: 0;
	height: 0;
	border-bottom: 50px solid red;
	border-right: 50px solid transparent;
}
 
#triangle_b_d{
	width: 0;
	height: 0;
	border-bottom: 50px solid red;
	border-left: 50px solid transparent;
}

Pour créer des formes plus complexes

Il faut superposer plusieurs formes simples (triangle, parallélogramme, carré, ...). La propriété css3 "transform" peut être utile pour réaliser la forme souhaitée, notamment grâce aux valeurs : "translate", "scale", "rotate", "skew", et "perspective".

#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;
	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;
   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: '';
   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;
   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;
}