Maison > interface Web > tutoriel CSS > Méthodes CSS pour dessiner divers graphiques

Méthodes CSS pour dessiner divers graphiques

高洛峰
Libérer: 2017-02-15 13:25:45
original
1467 Les gens l'ont consulté

Comment dessiner divers graphiques avec CSS

Carré (carré)

CSS绘制各种图形的方法

1

2

3

4

5

#square{

    width:100px;

    height:100px;

    backgroud:red;

}

Copier après la connexion
Copier après la connexion

Rectangle (rectangle)

CSS绘制各种图形的方法

1

2

3

4

#rectangle {

    width: 200px;

    height: 100px;

    background: red;

Copier après la connexion
Copier après la connexion

Cercle(cercle)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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é)

CSS绘制各种图形的方法

1

2

3

4

5

#square{

    width:100px;

    height:100px;

    backgroud:red;

}

Copier après la connexion
Copier après la connexion

Rectangle (rectangle)

CSS绘制各种图形的方法

1

2

3

4

#rectangle {

    width: 200px;

    height: 100px;

    background: red;

Copier après la connexion
Copier après la connexion

Cercle

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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)

CSS绘制各种图形的方法

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 !


Étiquettes associées:
css
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal