CSS

Dessiner des formes en CSS

Publié en juillet 2013 2 extraits de code par Rémy Montangé

Fiche écrite en 2013 et relue en 2026 : l’encadré en fin de fiche signale ce qui a changé depuis.

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 aux bordures 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 que les autres bordures restent transparentes.

CSS

#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é CSS "transform" peut être utile pour réaliser la forme souhaitée, notamment grâce aux valeurs : "translate", "scale", "rotate", "skew", et "perspective".

CSS

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

Comment créer des formes en CSS3

Autres fiches CSS