Wie zeichne ich einen Kreis in einer HTML-Seite?

Wie zeichnet man mit HTML5 und CSS3 einen Kreis?

Ist es auch möglich, Text einzufügen?

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>

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:

* { font-size: 50px; }

○
◌
◍
◎
●

Mehr Formen hier .

Sie können den Kreisen Text überlagern, wenn Sie:

#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">&#x25CF;</div>
    <div id="text">a</div>
</div>

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).

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;">&nbsp;</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>

Sie können die Eigenschaft border-radius verwenden oder ein div mit fester Höhe und Breite und einen Hintergrund mit einem PNG-Kreis erstellen.

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.

1. h1 {
   border: dashed 2px blue;
     width: 200px;
     height: 200px;
     border-radius: 100px;
     text-align: center;
     line-height: 60px;
     
   }

   <h1> <br>hello world</h1>

   Führen Sie das Code-Snippet ausErgebnisse ausblenden

   Erweitern Sie das Snippet

.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/