Maison >interface Web >tutoriel CSS >Comment utiliser CSS pour dessiner de petits graphiques en utilisant border et border-radius (exemple de code)
Comment utiliser CSS pour dessiner de petits graphiques en utilisant border et border-radius (exemple de code)
- 青灯夜游original
- 2018-09-21 17:45:424330parcourir
Dans le développement de pages, quelques petits graphiques sont souvent nécessaires pour embellir la page. Ces graphiques peuvent être affichés sous forme d'images, mais le chargement des images à chaque chargement de la page prend du temps. Alors, comment implémenter ces graphiques en utilisant CSS ? Ce chapitre vous présentera comment utiliser CSS pour dessiner de petits graphiques en utilisant border et border-radius (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
La plupart d'entre nous savent que l'attribut border a quatre paramètres, donc border-radius doit également avoir quatre paramètres
Nous savons que les quatre paramètres de l'attribut border sont border-top, border- droite, bordure en bas, bordure à gauche. (dans le sens des aiguilles d'une montre)
Alors, quels sont les quatre paramètres de bordure-radius ?
border-radius : en haut à gauche, en haut à droite, en bas à droite, en bas à gauche
Ci-dessous, nous utilisons border-radius pour dessiner quelques images courantes.
1. Cercle simple
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
width: 200px;
height: 200px;
background: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>Rendu :
2. >Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
width: 100px;
height: 200px;
background: red;
border-radius: 50%;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>3. En forme de coeur
 "153752285547213Comment utiliser CSS pour dessiner de petits graphiques en utilisant border et border-radius (exemple de code)")
Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
position: relative;
width: 200px;
height: 180px;
border: 1px solid black;
}
.left{
position: absolute;
top: 0;
left: 100px;
width: 100px;
height: 170px;
background: red;
/*左下角为旋转基点*/
transform-origin: 0 100%;
transform: rotate(-45deg);
border-radius: 50% 50% 0 0;
/*让left的上左和上右变成圆形就可以*/
}
.right{
position: absolute;
top: 0;
left: 0px;
width: 100px;
height: 170px;
background: red;
/*右下角为旋转基点*/
transform-origin: 100% 100%;
transform: rotate(45deg);
border-radius: 50% 50% 0 0;
/*让right的上左和上右变成圆形就可以*/
}
</style>
</head>
<body>
<div id="div">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
4. Des œufs
Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div{
position: relative;
width: 100px;
height: 180px;
background: red;
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
/*border-radius参数在／左右的区别，／左边是四个圆角的水平半径／右边是四个圆角垂直半径*/
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>
5. Boîte de dialogue
 "153752291729372Comment utiliser CSS pour dessiner de petits graphiques en utilisant border et border-radius (exemple de code)")
Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#div {
width: 120px;
height: 80px;
background: red;
position: relative;
border-radius: 10px;
margin-left: 50px;
}
#div:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
</style>
</head>
<body>
<div id="div">
</div>
</body>
</html>6. Yin et Yang Bagua
 "153752295470853Comment utiliser CSS pour dessiner de petits graphiques en utilisant border et border-radius (exemple de code)")
Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#baGua {
width: 96px;
height: 48px;
background: #eee;
border-color: red;
border-style: solid;
border-width: 2px 2px 50px 2px;
border-radius: 100%;
position: relative;
}
#baGua:before {
content: "";
position: absolute;
top: 50%;
left: 0;
background: #eee;
border: 18px solid red;
border-radius: 50%;
width: 12px;
height: 12px;
}
#baGua:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background: red;
border: 18px solid #eee;
border-radius:100%;
width: 12px;
height: 12px;
}
</style>
</head>
<body>
<div id="baGua">
</div>
</body>
</html>7. Symbole de l'infini
Rendu :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#wuQ{
position: relative;
width: 212px;
height: 100px;
}
#wuQ:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 0 50px;
/*下右不变圆弧*/
transform: rotate(-45deg);
}
#wuQ:after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
border: 20px solid red;
border-radius: 50px 50px 50px 0;
/*下左不变圆弧*/
transform: rotate(45deg);
}
</style>
</head>
<body>
<div id="wuQ">
</div>
</body>
</html>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!