Méthodes CSS pour dessiner divers graphiques

Comment dessiner divers graphiques avec CSS

Carré (carré)

#square{
    width:100px;
    height:100px;
    backgroud:red;
}

---

Rectangle (rectangle)

#rectangle {
    width: 200px;
    height: 100px;
    background: red;

---

Cercle(cercle)

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/ Vous pouvez utiliser des valeurs en pourcentage (supérieures à 50 %), Cependant, les versions inférieures d'Android ne prennent pas en charge /

---

Ovale (ovale)

#oval {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

/ Vous pouvez utiliser des valeurs en pourcentage ​​(supérieur à 50 %), mais les versions inférieures d'Android ne prennent pas en charge /

---

Triangle Up(triangle vers le haut)

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

---

Triangle Bas Bas)

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

---

Triangle Gauche (à gauche)

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

---

Triangle Droit(à droite)

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

---

Méthode CSS pour dessiner divers graphiques

Carré (carré)

#square{
    width:100px;
    height:100px;
    backgroud:red;
}

---

Rectangle (rectangle)

#rectangle {
    width: 200px;
    height: 100px;
    background: red;

---

Cercle

#circle {
    width: 100px;
    height: 100px;
    background: red;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}

/ Vous pouvez utiliser des valeurs en pourcentage (supérieures à 50%), mais les versions inférieures d'Android ne le prennent pas en charge/

---

Ovale (ovale)

#oval {
    width: 200px;
    height: 100px;
    background: red;
    -moz-border-radius: 100px / 50px;
    -webkit-border-radius: 100px / 50px;
    border-radius: 100px / 50px;
}

/ Valeurs en pourcentage (supérieures à 50 % ) peut être utilisé, mais les versions inférieures d'Android ne le prennent pas en charge /

---

Triangle Up(Triangle vers le haut)

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

---

Triangle Bas(Bas)

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

---

Triangle Gauche(vers la gauche)

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

---

Triangle droit (à droite)

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

Pour plus d'articles liés aux méthodes de dessin CSS de divers graphiques, veuillez faire attention au site Web PHP chinois !