Comment dessiner un cercle dans la page html?
Comment dessiner un cercle en utilisant HTML5 et CSS3?
est-il également possible de mettre du texte à l'intérieur?
16 réponses
on ne peut pas dessiner un cercle en soi. Mais vous pouvez faire quelque chose d'identique à un cercle.
Vous devez créer un rectangle avec des coins arrondis (via border-radius ) qui sont la moitié de la largeur/hauteur du cercle que vous voulez faire.
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}<div id="circle"></div> il est tout à fait possible dans HTML 5 . Vos options sont: Embedded SVG et <canvas> tag .
pour dessiner un cercle dans SVG intégré:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg> Cercle <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>il y a quelques cercles unicode que vous pouvez utiliser:
* { font-size: 50px; }○
◌
◍
◎
●plus de formes ici .
Vous pouvez superposer du texte sur les cercles, si vous voulez:
#container {
position: relative;
}
#circle {
font-size: 50px;
color: #58f;
}
#text {
z-index: 1;
position: absolute;
top: 21px;
left: 11px;
}<div id="container">
<div id="circle">●</div>
<div id="text">a</div>
</div>vous pouvez également utiliser une police personnalisée (comme celui ) si vous voulez avoir une plus grande chance de le regarder la même sur systèmes différents puisque tous les ordinateurs / navigateurs n'ont pas les mêmes polices installées.
border-radius:50% si vous voulez que le cercle s'ajuste 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 faire et centrer le texte avec aussi peu que 15 lignes de CSS ( violon ):
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, sur Windows7, et il est valide HTML5 (expérimental) et CSS3.
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 d'utiliser les extensions-moz et-webkit est de prendre en charge les versions pré-CSS3-finales de Gecko et Webkit.)
il y a d'autres exemples sur cette page . Aussi loin que l'insertion de texte, vous pouvez le faire, mais vous devez être conscient de positionnement, comme la plupart des navigateurs boîte rembourrage modèle utilise toujours le carré extérieur.
il n'y a pas techniquement de façon de dessiner un cercle avec HTML (il n'y a pas de balise HTML <circle> ), mais un cercle peut être dessiné.
la meilleure façon d'en dessiner un est d'ajouter border-radius: 50% à une étiquette telle que div . Voici un exemple:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
vous pouvez utiliser la propriété border-radius, ou faire une div avec une hauteur et une largeur fixes et un arrière-plan avec un Cercle png.
.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>il suffit de faire ce qui suit dans le script tags:
<!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 voilà, vous avez votre cercle.
.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;
}
-
h1 { border: dashed 2px blue; width: 200px; height: 200px; border-radius: 100px; text-align: center; line-height: 60px; }<h1> <br>hello world</h1>#
border-radius: 50%; transformera tous les éléments en un cercle, quelle que soit leur taille. Au moins, aussi longtemps que les height 1519150920" et width de la cible sont les mêmes, sinon il se transformera en un ovale .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Note : les préfixes de navigateur sont Non nécessaire plus pour le rayon de bordure
vous pouvez aussi utiliser clip-path: circle(); pour transformer un élément en cercle. Même si l'élément a une plus grande width que height (ou l'inverse), il deviendra un cercle, et pas un ovale.
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div> en fait, vous pouvez utiliser clip-path à transformer des éléments en toutes sortes de formes
Note : clip-path 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 ainsi:
<div>text</div>
Si vous voulez centre texte dans le cercle, vous pouvez faire ce qui suit:
#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>
<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;
}
qui produit:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}
Essayez ici: https://www.sassmeister.com/