Wie zeichne ich einen Kreis in einer HTML-Seite?

Antworten:

186

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>
Erweitern Sie das Snippet

Ryanoshea
quelle
6
Beim zweiten Gedanken möchten Sie vielleicht eine & nbsp; in diesem <div>, um sicherzustellen, dass es angezeigt wird. Andernfalls ignoriert der Browser dies möglicherweise.
Ryanoshea
14
Ich denke, diese Antwort ist falsch, da sie besagt, dass Sie in HTML5 keinen Kreis zeichnen können. Canvas ist jedoch ein HTML5-Element und Sie können einen Kreis in HTML5 ( w3schools.com/html/html5_canvas.asp )
zeichnen
19
benutze -webkit-border-radius: 100%; -Moz-Rand-Radius: 100%; Randradius: 100%; Auf diese Weise müssen Sie nur Breite und Höhe anpassen, um Ihre Änderungen in Zukunft anzuwenden
Arkady
3
Sie müssen einen Rand hinzufügen, um ihn sichtbar zu machen.
Hakan
4
Ich fand mit border-radius: 50%;gut funktioniert, ändern Sie die Größe wie gewünscht. Für Farbe können Sie background-coloroder verwenden border.
Grimeh
76

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>
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

jkj
quelle
53

Es gibt einige Unicode-Kreise, die Sie verwenden können:

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;
Erweitern Sie das Snippet

Mehr Formen hier .

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

Code-Snippet anzeigen

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.

Alex - GlassEditor.com
quelle
19

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-!

Lea Verou
quelle
1
Sie müssen sicherstellen, dass sowohl Breite als auch Höhe gleich sind, da sonst ein Oval entsteht.
Hp93
9

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>
Erweitern Sie das Snippet

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

MattAllegro
quelle
5 

.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>
Erweitern Sie das Snippet

Sonnig
quelle
4

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.

flauschige
quelle
4

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>
lachlanjc
quelle
4

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>
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

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>
Erweitern Sie das Snippet

Dieser Typ
quelle
1
Danke, dass du den Clip-Pfad erwähnt hast!
umbe1987
3

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.

Bardt
quelle
2

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>
Erweitern Sie das Snippet

Und los geht's, du hast deinen Kreis.

Dan
quelle
Welche Sprache soll das sein? Das OP fragte nach HTML5 und CSS3.
Claus Wilke
Dies kann in HTML unter Verwendung der Skript-Tags erfolgen, von denen ich glaube, dass ich sie in der ersten Zeile @ClausWilke
Dan
Bitte geben Sie dann ein vollständiges Beispiel an, das zeigt, wie Sie dies in einem HTML-Dokument verwenden. In dieser Antwort finden Sie ein Beispiel dafür, wie ein vollständiges Beispiel aussieht.
Claus Wilke
Ich denke, das sollte helfen, was Sie nicht verstehen konnten, wenn Sie wollen. Ich kann ein Bild des Ergebnisses hinzufügen, wie der Kreis aussieht. . .
Dan
Nicht unbedingt notwendig. Ich habe es in ein Code-Snippet eingefügt. Es wird ausgeführt, wenn Sie auf die Schaltfläche klicken.
Claus Wilke
2 

  1. h1 {
border: dashed 2px blue;
  width: 200px;
  height: 200px;
  border-radius: 100px;
  text-align: center;
  line-height: 60px;
  
}
    <h1> <br>hello world</h1>
    Erweitern Sie das Snippet

Mukhtar
quelle
1 
.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;
}
Shashi Kumar
quelle
1 
   <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 :)


quelle
0 

<div class="at-counter-box-content">

  <div class="at-counter-content">

      <span>40%</span>

  </div><!--at-counter-content-->

</div><!--at-counter-box-content-->

Shashi Kumar
quelle
3
Obwohl dieser Code die Frage möglicherweise beantwortet, würde die Bereitstellung eines zusätzlichen Kontexts darüber, warum und / oder wie er die Frage beantwortet, ihren langfristigen Wert erheblich verbessern. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen.
Toby Speight
0

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/

Rimian
quelle