Créer un rond et un triangle en css3 ou tout simplement des formes

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é

# index.html
<div class="carre"></div>

#style.css
.carre {
    width:100px;
    height:100px;
   background-color:#333;
}

 

Un cercle

# index.html
<div class="cercle"></div>

#style.css
.cercle {
    width:100px;
    height:100px;
    border-radius: 50%;
    background-color:#333;
}

Un oval

# 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.

# 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

# 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

# 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

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *