Come si disegna un cerchio usando HTML5 e CSS3?
È anche possibile inserire del testo all'interno?
Risposte:
Non puoi disegnare un cerchio di per sé. Ma puoi creare qualcosa di identico a un cerchio.
Dovresti creare un rettangolo con angoli arrotondati (tramite border-radius) che sono la metà della larghezza / altezza del cerchio che vuoi creare.
#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%;funzionava bene, cambia le dimensioni come desideri. Per il colore puoi usare background-coloro border.
È del tutto possibile in HTML 5 . Le tue opzioni sono: SVG e <canvas>tag incorporati .
Per disegnare un cerchio in SVG incorporato:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Cerchio in <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>Ci sono alcuni cerchi Unicode che potresti usare:
Altre forme qui .
Puoi sovrapporre il testo ai cerchi se desideri:
Puoi anche usare un carattere personalizzato (come questo ) se vuoi avere maggiori possibilità che abbia lo stesso aspetto su sistemi diversi poiché non tutti i computer / browser hanno gli stessi caratteri installati.
A partire dal 2015, puoi farlo e centrare il testo con un minimo di 15 righe di 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>Senza alcun -webkit-s, funziona su IE11, Firefox, Chrome e Opera ed è valido HTML5 (sperimentale) e CSS3.
Lo stesso su 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>Puoi utilizzare l'attributo border-radius per assegnargli un border-radius equivalente al border-radius dell'elemento. Per esempio:
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>(Il motivo per utilizzare le estensioni -moz e -webkit è supportare le versioni pre-CSS3-final di Gecko e Webkit.)
Ci sono altri esempi in questa pagina . Per quanto riguarda l'inserimento del testo, puoi farlo ma devi essere consapevole del posizionamento, poiché il modello di riempimento del riquadro della maggior parte dei browser utilizza ancora il quadrato esterno.
Tecnicamente non c'è un modo per disegnare un cerchio con HTML (non c'è un <circle>tag HTML), ma è possibile disegnare un cerchio.
Il modo migliore per disegnarne uno è aggiungere border-radius: 50%a un tag come div. Ecco un esempio:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>border-radius: 50%;trasformerà tutti gli elementi in un cerchio, indipendentemente dalle dimensioni. Almeno, a patto che i height e width del bersaglio siano gli stessi, altrimenti si trasformerà in un ovale .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Nota : i prefissi del browser non sono più necessari per border-radius
In alternativa, puoi anche usare clip-path: circle();per trasformare un elemento in un cerchio. Anche se l'elemento ha una maggiore widthdi height(o viceversa), diventerà comunque un cerchio e non un ovale.
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>Nota : clip-path non è (ancora) supportato da tutti i browser
Puoi posizionare il testo all'interno del cerchio, semplicemente scrivendo il testo all'interno dei tag del target, in questo
modo:
<div>text</div>Se vuoi centrare il testo nel cerchio, puoi fare quanto segue:
#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>Esegui semplicemente le seguenti operazioni nei tag 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>Ed ecco qua hai il tuo cerchio.
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>semplice e alle prime armi :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->Se stai usando sass per scrivere il tuo CSS puoi fare:
@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;
}Quali uscite:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}Provalo qui: https://www.sassmeister.com/