Comment dessiner un cercle en utilisant HTML5 et CSS3?
Est-il également possible de mettre du texte à l'intérieur?
Réponses:
Vous ne pouvez pas dessiner un cercle en soi. Mais vous pouvez créer quelque chose d’identique à un cercle.
Vous devrez créer un rectangle avec des coins arrondis (via border-radius) qui font la moitié de la largeur / hauteur du cercle que vous souhaitez créer.
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}<div id="circle"></div>border-radius: 50%;fonctionnait bien, changez la taille comme vous le souhaitez. Pour la couleur, vous pouvez utiliser background-colorou border.
C'est tout à fait possible en HTML 5 . Vos options sont: SVG et <canvas>tag intégrés .
Pour dessiner un cercle en SVG incorporé:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Cercle dans <canvas>:
var canvas = document.getElementById("circlecanvas");
var context = canvas.getContext("2d");
context.arc(50, 50, 50, 0, Math.PI * 2, false);
context.fillStyle = "red";
context.fill()<canvas id="circlecanvas" width="100" height="100"></canvas>Vous pouvez utiliser quelques cercles Unicode:
Plus de formes ici .
Vous pouvez superposer du texte sur les cercles si vous souhaitez:
Vous pouvez également utiliser une police personnalisée (comme celle- ci) si vous voulez avoir plus de chances qu'elle ait la même apparence sur différents systèmes, car tous les ordinateurs / navigateurs n'ont pas les mêmes polices installées.
border-radius:50% si vous voulez que le cercle s'adapte aux dimensions du conteneur (par exemple, si le texte est de longueur variable)
N'oubliez pas les préfixes -moz-et -webkit-!
À partir de 2015, vous pouvez le créer et centrer le texte avec aussi peu que 15 lignes de CSS ( Fiddle ):
body {
background-color: #fff;
}
#circle {
position: relative;
background-color: #09f;
margin: 20px auto;
width: 400px;
height: 400px;
border-radius: 200px;
}
#text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>circle with text</title>
</head>
<body>
<div id="circle">
<div id="text">Text in the circle</div>
</div>
</body>
</html>Sans aucun -webkit-s, cela fonctionne sur IE11, Firefox, Chrome et Opera, et il est valide HTML5 (expérimental) et CSS3.
Idem sur MS Edge (2020).
.circle{
height: 65px;
width: 65px;
border-radius: 50%;
border:1px solid red;
line-height: 65px;
text-align: center;
}<div class="circle"><span>text</span></div>Vous pouvez utiliser l'attribut border-radius pour lui donner un border-radius équivalent au border-radius de l'élément. Par exemple:
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>(La raison de l'utilisation des extensions -moz et -webkit est de prendre en charge les versions pré-CSS3-final de Gecko et Webkit.)
Il y a plus d'exemples sur cette page . En ce qui concerne l'insertion de texte, vous pouvez le faire, mais vous devez être attentif au positionnement, car le modèle de remplissage de boîte de la plupart des navigateurs utilise toujours le carré extérieur.
Il n'y a pas techniquement un moyen de dessiner un cercle avec HTML (il n'y a pas de <circle>balise HTML), mais un cercle peut être dessiné.
La meilleure façon d'en dessiner un est de l'ajouter border-radius: 50%à une balise telle que div. Voici un exemple:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>border-radius: 50%;transformera tous les éléments en cercle, quelle que soit leur taille. Au moins, tant que les height et width de la cible sont identiques, sinon elle se transformera en ovale .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Remarque : les préfixes de navigateur ne sont plus nécessaires pour border-radius
Vous pouvez également utiliser clip-path: circle();pour transformer un élément en cercle. Même si l'élément a un plus grand widthque height(ou l'inverse), il deviendra toujours un cercle et non un ovale.
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>Remarque : le chemin du clip n'est pas (encore) pris en charge par tous les navigateurs
Vous pouvez placer du texte à l'intérieur du cercle, simplement en écrivant le texte à l'intérieur des balises de la cible,
comme ceci:
<div>text</div>Si vous souhaitez centrer le texte dans le cercle, vous pouvez effectuer les opérations suivantes:
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
display: flex;
align-items: center;
}
#text{
width: 100%;
text-align: center;
}<div id="target">
<div id="text">text</div>
</div>Procédez simplement comme suit dans les balises de script:
<!Doctype html>
<html>
<head>
<title>Circle Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid
#d3d3d3;">
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100, 75, 50, 0, 2 * Math.PI);
ctx.stroke();
</script>
</body>
</body>
</html>Et là vous allez, vous avez votre cercle.
h1 {
border: dashed 2px blue;
width: 200px;
height: 200px;
border-radius: 100px;
text-align: center;
line-height: 60px;
}<h1> <br>hello world</h1>.at-counter-box {
border: 2px solid #1ac6ff;
width: 150px;
height: 150px;
border-radius: 100px;
font-family: 'Oswald Sans', sans-serif;
color:#000;
}
.at-counter-box-content {
position: relative;
}
.at-counter-content span {
font-size: 40px;
font-weight: bold ;
text-align: center;
position: relative;
top: 55px;
} <head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>simple et novice :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->Si vous utilisez sass pour écrire votre CSS, vous pouvez faire:
@mixin draw_circle($radius){
width: $radius*2;
height: $radius*2;
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.my-circle {
@include draw_circle(25px);
background-color: red;
}Quelles sorties:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}Essayez-le ici: https://www.sassmeister.com/