Comment dessiner divers graphiques avec CSS
Carré (carré)

1 2 3 4 5 | #square{
width:100px;
height:100px;
backgroud:red;
}
|
Copier après la connexion
Copier après la connexion
Rectangle (rectangle)

1 2 3 4 | #rectangle {
width: 200px;
height: 100px;
background: red;
|
Copier après la connexion
Copier après la connexion
Cercle(cercle)

1 2 3 4 5 6 7 8 | #circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
|
Copier après la connexion
Copier après la connexion
/ Vous pouvez utiliser des valeurs en pourcentage (supérieures à 50 %), Cependant, les versions inférieures d'Android ne prennent pas en charge /
Ovale (ovale)

1 2 3 4 5 6 7 8 | #oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
|
Copier après la connexion
Copier après la connexion
/ 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)

1 2 3 4 5 6 7 | #triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
|
Copier après la connexion
Copier après la connexion
Triangle Bas Bas)

1 2 3 4 5 6 7 | #triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
|
Copier après la connexion
Copier après la connexion
Triangle Gauche (à gauche)

1 2 3 4 5 6 7 | #triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
|
Copier après la connexion
Copier après la connexion
Triangle Droit(à droite)

1 2 3 4 5 6 7 | #triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
|
Copier après la connexion
Copier après la connexion
Méthode CSS pour dessiner divers graphiques
Carré (carré)

1 2 3 4 5 | #square{
width:100px;
height:100px;
backgroud:red;
}
|
Copier après la connexion
Copier après la connexion
Rectangle (rectangle)

1 2 3 4 | #rectangle {
width: 200px;
height: 100px;
background: red;
|
Copier après la connexion
Copier après la connexion
Cercle

1 2 3 4 5 6 7 8 | #circle {
width: 100px;
height: 100px;
background: red;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}
|
Copier après la connexion
Copier après la connexion
/ 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)

1 2 3 4 5 6 7 8 | #oval {
width: 200px;
height: 100px;
background: red;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}
|
Copier après la connexion
Copier après la connexion
/ 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)

1 2 3 4 5 6 7 | #triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
|
Copier après la connexion
Copier après la connexion
Triangle Bas(Bas)

1 2 3 4 5 6 7 | #triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
|
Copier après la connexion
Copier après la connexion
Triangle Gauche(vers la gauche)

1 2 3 4 5 6 7 | #triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
|
Copier après la connexion
Copier après la connexion
Triangle droit (à droite)

1 2 3 4 5 6 7 | #triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
|
Copier après la connexion
Copier après la connexion
Pour plus d'articles liés aux méthodes de dessin CSS de divers graphiques, veuillez faire attention au site Web PHP chinois !