Wie zeichnet man einen Kreis in einer HTML-Seite?

Question 1

Wie zeichnet man einen Kreis mit HTML5 und CSS3?

Ist es auch möglich Text einzufügen?

Question 2

Sie können keinen Kreis per se zeichnen. Aber Sie können etwas machen, das mit einem Kreis identisch ist.

Sie müssten ein Rechteck mit abgerundeten Ecken erstellen (via border-radius) das sind halbe Breite/Höhe des Kreises, den Sie machen möchten.

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }

<div id="circle"></div>

Question 3

Es ist durchaus möglich, in HTML5. Ihre Optionen sind: Eingebettetes SVG und <canvas> Schild.

Kreis in eingebettetem SVG zeichnen:

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>

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

Question 4

Es gibt ein paar Unicode-Kreise, die Sie verwenden könnten:

* { font-size: 50px; }

&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;

Mehr Formen Hier.

Sie können Text über die Kreise legen, wenn Sie möchten:

#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 verwenden (z Das one), wenn Sie eine höhere Wahrscheinlichkeit haben möchten, dass es auf verschiedenen Systemen gleich aussieht, da nicht auf allen Computern/Browsern die gleichen Schriftarten installiert sind.

Question 5

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 -moz- und -webkit- Präfixe!~~ (voranstellen nicht mehr gebraucht)

div{
  border-radius: 50%;
  display: inline-block;
  background: lightgreen;
}

.a{
  padding: 50px;
}

.b{
  width: 100px;
  height: 100px;
}

<div class="a"></div>
<div class="b"></div>

Question 6

Ab 2015 können Sie es schaffen und den Text mit nur 15 CSS-Zeilen zentrieren (Geige):

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 irgendetwas -webkit-s, dies funktioniert auf IE11, Firefox, Chrome und Opera, und es ist gültiges HTML5 (experimentell) und CSS3.

Gleiches gilt für MS Edge (2020).

Question 7

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

Question 8

border-radius: 50%; verwandelt alle Elemente in einen Kreis, unabhängig von ihrer Größe. Wenigstens, solange die height und width des Ziels gleich sind, sonst wird es zu einem Oval.

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;
}

<div id="target"></div>

Notiz: Browserpräfixe sind nicht wird für border-radius nicht mehr benötigt

Alternativ können Sie verwenden clip-path: circle(); um ein Element auch in einen Kreis zu verwandeln. Auch wenn das Element größer ist width als height (oder umgekehrt), es wird immer noch ein Kreis, und nicht ein Oval.

#target{
    width: 200px;
    height: 100px;
    background-color: #aaa;
    clip-path: circle();
}

<div id="target"></div>

Notiz: Clip-Pfad ist nicht (noch) von allen Browsern unterstützt

Sie können Text innerhalb des Kreises platzieren, indem Sie einfach den Text in die Tags des Ziels schreiben,
so:

<div>text</div>

Wenn du möchtest Center 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>