Dessiner des triangles (différents angles) avec un didacticiel CSS_Basic pur

Nos pages Web ont des styles en constante évolution grâce au CSS. Ce langage de style apparemment simple est très flexible dans son utilisation. Tant que vous faites preuve de créativité, vous pouvez obtenir de nombreux autres effets inimaginables. Surtout avec l'utilisation généralisée de CSS3, de nouvelles œuvres CSS ont vu le jour.

Aujourd'hui, je vais vous présenter la méthode de dessin du triangle CSS

Copiez le code Le le code est le suivant :

#triangle-up {
width : 0;
height : 0;
border-left : 50px solid transparent;
border-right : 50px transparent uni ;
bordure inférieure : 100px rouge uni ;
}

Copier le code Le code est le suivant :

#triangle- down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}

Copier le code Le code est le suivant :

#triangle- left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}

Copier le code Le code est le suivant :

#triangle- right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}

Copier le code Le code est le suivant :

#triangle- topleft {
width : 0;
height : 0;
border-top : 100px rouge uni;
border-right : 100px solid transparent;
}

Copier le code Le code est le suivant :

#triangle- topright {
width : 0;
height : 0;
border-top : 100px rouge uni;
border-left : 100px solide transparent ; >

Copier le code

Le code est le suivant :#triangle- bottomleft { width : 0;

height : 0;

border-bottom : 100px rouge uni;
border-right : 100px solid transparent;
}

Copier le code

Le code est le suivant :

#segi tiga-bawah kanan {
    lebar: 0;
    tinggi: 0;
    bahagian bawah sempadan: 100px merah pepejal;
    sempadan-kiri: 100px padat }