Maison  >  Article  >  interface Web  >  Comment dessiner une forme d'éventail en CSS3

Comment dessiner une forme d'éventail en CSS3

藏色散人
藏色散人original
2021-01-13 10:37:395346parcourir

Comment dessiner une forme d'éventail en CSS3 : créez d'abord un exemple de fichier HTML ; puis ajoutez l'attribut border-radius au div spécifié ; et enfin définissez l'attribut composite tel que "border-radius:80px 0 0; ".

Comment dessiner une forme d'éventail en CSS3

L'environnement d'exploitation de ce tutoriel : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Le CSS est devenu de plus en plus puissant. Vous pouvez l'utiliser pour dessiner diverses formes simples, qui peuvent être utilisées pour remplacer l'affichage d'images. Ce partage est principalement utilisé pour dessiner des cercles et des secteurs. pour les utiliser, CSS dessine une forme d'éventail.

Dessiner une forme d'éventail via CSS :

<html>
<head>
<style type="text/css">
div{
 border-radius:80px 0 0;
  width: 80px;
  height: 80px;
  background: #666;
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Rendu :

Comment dessiner une forme déventail en CSS3

Principe de mise en œuvre : Le coin supérieur gauche est arrondi, et le les trois autres coins sont arrondis. Il s'agit d'un angle droit : la valeur du coin supérieur gauche est la même que la largeur et la hauteur, et les valeurs des trois autres coins restent inchangées (égales à 0).

L'attribut border-radius est un attribut composite qui peut spécifier jusqu'à quatre attributs border -*- radius

Syntaxe :

border-radius: 1-4 length|% / 1-4 length|%;

L'ordre des quatre valeurs pour chaque rayon est : coin supérieur gauche, coin supérieur droit, coin inférieur droit, coin inférieur gauche. Si le coin inférieur gauche est omis, le coin supérieur droit est le même. Si le coin inférieur droit est omis, le coin supérieur gauche est le même. Si le coin supérieur droit est omis, le coin supérieur gauche est le même.

Valeur de l'attribut :

longueur définit la forme de la courbe.

% Utilisez % pour définir la forme des coins.

Recommandé : Tutoriel vidéo CSS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
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
Article précédent:Comment utiliser le menu CSS3Article suivant:Comment utiliser le menu CSS3