Pré-requis : les éléments sur lesquels on souhaite créer des formes doivent être de type block ou inline-block
Commençons par le plus simple
Un carré
1 2 3 4 5 6 7 8 9 10 11 | # index.html <div class="carre"></div> #style.css .carre { width:100px; height:100px; background-color:#333; } |
Un cercle
1 2 3 4 5 6 7 8 9 10 11 12 | # index.html <div class="cercle"></div> #style.css .cercle { width:100px; height:100px; border-radius: 50%; background-color:#333; } |
Un oval
1 2 3 4 5 6 7 8 9 10 11 12 | # index.html <div class="oval"></div> #style.css .oval { width:100px; height:50px; border-radius: 80px / 40px; background-color:#333; } |
Un triangle
La création d’un triangle est un peu différente. Il faut modifier la largeur des bordures pour obtenir la forme voulu. Pour bien comprendre le processus, ici toutes les bordures ont une couleur.
1 2 3 4 5 6 7 8 9 10 11 12 | # index.html <div class="triangle-bottom"></div> #style.css .triangle-bottom { border-bottom: 240px solid yellow; border-left: 70px solid red; border-right: 70px solid blue; background-color:#333; } |
Un triangle qui pointe vers le bas
1 2 3 4 5 6 7 8 9 10 11 | # index.html <div class="triangle-top"></div> #style.css .triangle-top { border-top: 240px solid blue; border-left: 70px solid transparent; border-right: 70px solid transparent; } |
Un triangle qui pointe à gauche
1 2 3 4 5 6 7 8 9 10 11 | # index.html <div class="triangle-left"></div> #style.css .triangle-left { border-right: 240px solid blue; border-left: 70px solid transparent; border-bottom: 70px solid transparent; } |
Un triangle qui pointe à droite
1 2 3 4 5 6 7 8 9 10 11 | # index.html <div class="triangle-right"></div> #style.css .triangle-right { border-left: 240px solid blue; border-right: 70px solid transparent; border-bottom: 70px solid transparent; } |