Jak narysować okrąg na stronie html?

Odpowiedzi:

188

Nie możesz narysować koła jako takiego. Ale możesz zrobić coś identycznego z kołem.

Musiałbyś utworzyć prostokąt z zaokrąglonymi narożnikami (przez border-radius), które stanowią połowę szerokości / wysokości koła, które chcesz zrobić.

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }
<div id="circle"></div>
Rozwiń fragment

ryanoshea
źródło
6
Po namyśle możesz trzymać & nbsp; wewnątrz tego <div>, aby upewnić się, że zostanie wyświetlony. W przeciwnym razie przeglądarka może to zignorować.
ryanoshea
14
Myślę, że ta odpowiedź jest błędna, ponieważ mówi, że nie można narysować koła w HTML5. Canvas jest jednak elementem HTML5 i MOŻESZ narysować okrąg w HTML5 ( w3schools.com/html/html5_canvas.asp )
jkj
19
użyj -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; w ten sposób wystarczy dostosować szerokość i wysokość, aby zastosować zmiany w przyszłości
Arkady
3
musisz dodać obramowanie, aby było widoczne.
hakan
4
Okazało się, że użycie border-radius: 50%;działa dobrze, zmień rozmiar zgodnie z potrzebami. Do koloru możesz użyć background-colorlub border.
Grimeh,
76

Jest to całkiem możliwe w HTML 5 . Dostępne opcje to: Osadzone SVG i <canvas>tag .

Aby narysować okrąg w osadzonym SVG: 

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

Zakreśl <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>
Rozwiń fragment

jkj
źródło
53

Istnieje kilka kręgów Unicode, których możesz użyć:

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;
Rozwiń fragment

Więcej kształtów tutaj .

Możesz nałożyć tekst na kręgi, jeśli chcesz:

Pokaż fragment kodu

Możesz także użyć niestandardowej czcionki (takiej jak ta ), jeśli chcesz mieć większą szansę, że będzie wyglądać tak samo w różnych systemach, ponieważ nie wszystkie komputery / przeglądarki mają zainstalowane te same czcionki.

Alex - GlassEditor.com
źródło
19

border-radius:50% jeśli chcesz, aby koło dostosowywało się do dowolnych wymiarów pojemnika (np. jeśli tekst ma zmienną długość)

Nie zapomnij o przedrostkach -moz-i -webkit-!

Lea Verou
źródło
1
Musisz upewnić się, że zarówno szerokość, jak i wysokość są równe, w przeciwnym razie utworzy owal.
Hp93
10

Od 2015 r. Możesz to zrobić i wyśrodkować tekst za pomocą zaledwie 15 linii 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>
Rozwiń fragment

Bez -webkit- s, działa to w IE11, Firefox, Chrome i Opera, i jest poprawne w HTML5 (eksperymentalne) i CSS3.

To samo na MS Edge (2020).

MattAllegro
źródło
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>
Rozwiń fragment

Słoneczny
źródło
4

Możesz użyć atrybutu border-radius, aby nadać mu border-radius odpowiednik border-radius elementu. Na przykład:

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

(Powodem używania rozszerzeń -moz i -webkit jest obsługa końcowych wersji Gecko i Webkit przed CSS3).

Na tej stronie jest więcej przykładów . Jeśli chodzi o wstawianie tekstu, możesz to zrobić, ale musisz pamiętać o pozycjonowaniu, ponieważ model wypełnienia pól w większości przeglądarek nadal używa zewnętrznego kwadratu.

puszysty
źródło
4

Technicznie nie ma sposobu na narysowanie okręgu za pomocą HTML (nie ma <circle>tagu HTML), ale można narysować okrąg.

Najlepszym sposobem na narysowanie jednego jest dodanie border-radius: 50%do tagu, takiego jak div. Oto przykład:

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
lachlanjc
źródło
4

border-radius: 50%;zamieni wszystkie elementy w okrąg, niezależnie od rozmiaru. Przynajmniej tak długo , jak długo height i width tarczy są takie same, w przeciwnym razie zmieni się w owal .

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;
}
<div id="target"></div>
Rozwiń fragment

Uwaga : przedrostki przeglądarki nie są już potrzebne dla border-radius

Alternatywnie możesz użyć, clip-path: circle();aby zamienić element również w okrąg. Nawet jeśli element ma większe widthniż height(lub odwrotnie), nadal stanie się okręgiem, a nie owalem.

#target{
    width: 200px;
    height: 100px;
    background-color: #aaa;
    clip-path: circle();
}
<div id="target"></div>
Rozwiń fragment

Uwaga : clip-path nie jest (jeszcze) obsługiwany przez wszystkie przeglądarki

Możesz umieścić tekst wewnątrz okręgu, po prostu wpisując tekst wewnątrz tagów celu, na
przykład:

<div>text</div>

Jeśli chcesz wyśrodkować tekst w okręgu, możesz wykonać następujące czynności:

#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>
Rozwiń fragment

Ten facet
źródło
1
Dziękuję za wspomnienie clip-path!
umbe1987
3

Możesz użyć właściwości border-radius lub utworzyć element div o stałej wysokości i szerokości oraz tło z okręgiem png.

Bardt
źródło
2

Po prostu wykonaj następujące czynności w tagach skryptu:

<!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>
Rozwiń fragment

I oto masz swój krąg.

Dan
źródło
Który to ma być język? OP zapytał o HTML5 i CSS3.
Claus Wilke
Można to zrobić w html za pomocą tagów skryptu, o których myślę, że wspomniałem w pierwszej linii @ClausWilke
Dan
Następnie podaj pełny przykład, który pokazuje, jak używasz tego w dokumencie HTML. Zobacz tę odpowiedź, aby zobaczyć, jak wygląda kompletny przykład.
Claus Wilke,
Myślę, że to powinno pomóc w tym, czego nie byłeś w stanie zrozumieć, jeśli chcesz, mogę dodać zdjęcie wyniku, jak wygląda koło. . .
Dan,
Nie trzeba. Umieściłem to we fragmencie kodu. Działa po kliknięciu przycisku.
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>
    Rozwiń fragment

Mukhtar
źródło
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
źródło
1 
   <head>
       <style>

       #circle{
       width:200px;
       height:200px;
       border-radius:100px;
       background-color:red;
       }
       </style>
   </head>

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

prosty i nowicjusz :)


źródło
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
źródło
3
Chociaż ten kod może odpowiedzieć na pytanie, dostarczenie dodatkowego kontekstu dotyczącego tego, dlaczego i / lub w jaki sposób odpowiada na pytanie, znacznie poprawiłoby jego długoterminową wartość. Proszę edytować swoje odpowiedzi, aby dodać trochę wyjaśnień.
Toby Speight
0

Jeśli używasz Sassa do pisania CSS, możesz:

@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;
}

Które wyjścia:

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

Wypróbuj tutaj: https://www.sassmeister.com/

Rimian
źródło