Wie zeichnet man mit HTML5 und CSS3 einen Kreis?
Ist es auch möglich, Text einzufügen?
Antworten:
Sie können keinen Kreis per se zeichnen. Aber Sie können etwas mit einem Kreis identisch machen.
Sie müssten ein Rechteck mit abgerundeten Ecken (Via border-radius) erstellen , die die Hälfte der Breite / Höhe des Kreises betragen , den Sie erstellen möchten.
#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%;gut funktioniert, ändern Sie die Größe wie gewünscht. Für Farbe können Sie background-coloroder verwenden border.
In HTML 5 ist dies durchaus möglich . Ihre Optionen sind: Eingebettetes SVG und <canvas>Tag .
So zeichnen Sie einen Kreis in eingebettetem SVG:
<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" fill="red" />
</svg>Kreis 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>Es gibt einige Unicode-Kreise, die Sie verwenden können:
Mehr Formen hier .
Sie können den Kreisen Text überlagern, wenn Sie:
Sie können auch eine benutzerdefinierte Schriftart (wie diese ) verwenden, wenn Sie eine höhere Wahrscheinlichkeit haben möchten, dass sie auf verschiedenen Systemen gleich aussieht, da nicht auf allen Computern / Browsern die gleichen Schriftarten installiert sind.
border-radius:50% Wenn Sie möchten, dass sich der Kreis an die Abmessungen des Containers anpasst (z. B. wenn der Text eine variable Länge hat).
Vergessen Sie nicht die Präfixe -moz-und -webkit-!
Ab 2015 können Sie den Text mit nur 15 Zeilen CSS ( Fiddle ) erstellen und zentrieren :
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>Ohne -webkit-s funktioniert dies unter IE11, Firefox, Chrome und Opera und es ist gültiges HTML5 (experimentell) und CSS3.
Gleiches gilt für 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>Sie können das Attribut Rahmenradius verwenden, um ihm einen Randradius zu geben, der dem Randradius des Elements entspricht. Beispielsweise:
<div style="border-radius 10px; -moz-border-radius 10px; -webkit-border-radius 10px; width: 20px; height: 20px; background: red; border: solid black 1px;"> </div>(Der Grund für die Verwendung der Erweiterungen -moz und -webkit ist die Unterstützung von Pre-CSS3-endgültigen Versionen von Gecko und Webkit.)
Es gibt weitere Beispiele auf dieser Seite . Das Einfügen von Text ist möglich, Sie müssen jedoch auf die Positionierung achten, da das Box-Padding-Modell der meisten Browser immer noch das äußere Quadrat verwendet.
Es gibt technisch keine Möglichkeit, einen Kreis mit HTML zu zeichnen (es gibt kein <circle>HTML-Tag), aber es kann ein Kreis gezeichnet werden.
Der beste Weg, einen zu zeichnen, ist das Hinzufügen border-radius: 50%zu einem Tag wie div. Hier ist ein Beispiel:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>border-radius: 50%;verwandelt alle Elemente in einen Kreis, unabhängig von der Größe. Zumindest solange das height und width des Ziels gleich sind, wird es sonst zu einem Oval .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>Hinweis : Für den Rahmenradius werden keine Browserpräfixe mehr benötigt
Alternativ können Sie clip-path: circle();ein Element auch in einen Kreis verwandeln. Selbst wenn das Element größer widthals height(oder umgekehrt) ist, wird es immer noch ein Kreis und kein Oval.
#target{
width: 200px;
height: 100px;
background-color: #aaa;
clip-path: circle();
}<div id="target"></div>Hinweis : Clip-Pfad ist nicht (noch) nicht von allen Browsern unterstützt
Sie können Text innerhalb des Kreises platzieren, indem Sie den Text einfach
wie folgt in die Tags des Ziels schreiben :
<div>text</div>Wenn Sie wollen Mitte Text im Kreis, können Sie folgendes tun:
#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>Gehen Sie in den Skript-Tags einfach wie folgt vor:
<!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>Und los geht's, du hast deinen Kreis.
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>einfach und Anfänger :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->Wenn Sie sass zum Schreiben Ihres CSS verwenden, können Sie Folgendes tun:
@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;
}Welche Ausgänge:
.my-circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background-color: red;
}Probieren Sie es hier aus: https://www.sassmeister.com/