Как нарисовать круг на странице html?

Ответы:

188

Вы не можете нарисовать круг как таковой. Но можно сделать что-то похожее на круг.

Вам нужно будет создать прямоугольник с закругленными углами (переходными отверстиями border-radius), которые составляют половину ширины / высоты круга, который вы хотите создать.

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }
<div id="circle"></div>
Развернуть фрагмент

ryanoshea
источник
6
Если подумать, возможно, вы захотите приклеить & nbsp; внутри этого <div>, чтобы убедиться, что он отображается. В противном случае браузер может проигнорировать это.
ryanoshea 03
14
Я думаю, что этот ответ неверен, поскольку в нем говорится, что вы не можете нарисовать круг в HTML5. Canvas - это элемент HTML5, и вы МОЖЕТЕ нарисовать круг в HTML5 ( w3schools.com/html/html5_canvas.asp )
jkj 02
19
используйте -webkit-border-radius: 100%; -moz-border-radius: 100%; радиус границы: 100%; таким образом вам нужно только настроить ширину и высоту, чтобы применить ваши изменения в будущем
Аркадий
3
вам нужно добавить границу, чтобы сделать ее видимой.
hakan
4
Я обнаружил, что использование border-radius: 50%;работает хорошо, измените размер по желанию. Для цвета можно использовать background-colorили border.
Grimeh 07
76

В HTML 5 это вполне возможно . Возможны следующие варианты: встроенный SVG и <canvas>тег .

Чтобы нарисовать круг во встроенном SVG: 

<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50" fill="red" />
</svg>
Развернуть фрагмент

Обведите <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>
Развернуть фрагмент

JKJ
источник
53

Вот несколько кругов Юникода, которые вы можете использовать:

* { font-size: 50px; }
&#x25CB;
&#x25CC;
&#x25CD;
&#x25CE;
&#x25CF;
Развернуть фрагмент

Больше фигур здесь .

Вы можете наложить текст на круги, если хотите:

Показать фрагмент кода

Вы также можете использовать собственный шрифт (например, этот ), если хотите, чтобы он выглядел одинаково в разных системах, поскольку не на всех компьютерах / браузерах установлены одинаковые шрифты.

Алекс - GlassEditor.com
источник
19

border-radius:50% если вы хотите, чтобы круг приспосабливался к любым размерам контейнера (например, если текст переменной длины)

Не забывайте -moz-и -webkit-префиксы!

Леа Веру
источник
1
Вы должны убедиться, что ширина и высота равны, иначе получится овал.
Hp93 07
10

По состоянию на 2015 год вы можете сделать это и центрировать текст с помощью всего 15 строк 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>
Развернуть фрагмент

Без каких-либо -webkit-s это работает в IE11, Firefox, Chrome и Opera, и это допустимый HTML5 (экспериментальный) и CSS3.

То же самое в MS Edge (2020).

MattAllegro
источник
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>
Развернуть фрагмент

Солнечно
источник
4

Вы можете использовать атрибут border-radius, чтобы задать ему радиус границы, эквивалентный радиусу границы элемента. Например:

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

(Причина использования расширений -moz и -webkit заключается в поддержке версий Gecko и Webkit до CSS3-final.)

На этой странице есть больше примеров . Что касается вставки текста, вы можете это сделать, но вы должны помнить о позиционировании, так как в большинстве браузеров модель заполнения окна по-прежнему использует внешний квадрат.

пушистый
источник
4

Технически не существует способа нарисовать круг с помощью HTML (нет <circle> тега HTML), но круг можно нарисовать.

Лучший способ нарисовать его - добавить border-radius: 50%в тег, например div. Вот пример:

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
lachlanjc
источник
4

border-radius: 50%;превратит все элементы в круг, независимо от размера. По крайней мере, пока height и width цели совпадают, иначе она превратится в овал .

#target{
    width: 100px;
    height: 100px;
    background-color: #aaa;
    border-radius: 50%;
}
<div id="target"></div>
Развернуть фрагмент

Примечание : префиксы браузера больше не нужны для border-radius

В качестве альтернативы вы также можете использовать clip-path: circle();для превращения элемента в круг. Даже если у элемента больше widthчем height(или наоборот), он все равно станет кругом, и не овалом.

#target{
    width: 200px;
    height: 100px;
    background-color: #aaa;
    clip-path: circle();
}
<div id="target"></div>
Развернуть фрагмент

Примечание : клип-путь не (пока) поддерживается всеми браузерами

Вы можете разместить текст внутри круга, просто написав текст внутри тегов цели,
например:

<div>text</div>

Если вы хотите центрировать текст в круге, вы можете сделать следующее:

#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>
Развернуть фрагмент

Этот парень
источник
1
Спасибо, что упомянули clip-path!
umbe1987
3

Вы можете использовать свойство border-radius или создать div с фиксированной высотой и шириной и фоном с кругом png.

Bardt
источник
2

Просто сделайте следующее в тегах скрипта:

<!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>
Развернуть фрагмент

И вот, у вас есть круг.

Дэн
источник
На каком языке это должно быть? OP спросил о HTML5 и CSS3.
Клаус Вилке
Это можно сделать в html, используя теги скрипта, я думаю, я упомянул в первой строке @ClausWilke
Дэн
Пожалуйста, предоставьте полный пример, который показывает, как вы используете это в HTML-документе. См. Этот ответ, чтобы увидеть, как выглядит полный пример.
Клаус Вилке
Я думаю, это должно помочь в том, что вы не смогли понять, если хотите, я могу добавить картинку результата, как выглядит круг. , ,
Дэн
Не обязательно. Я поместил это во фрагмент кода. Он запускается, когда вы нажимаете кнопку.
Клаус Вилке
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>
    Развернуть фрагмент

Мухтар
источник
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;
}
шаши кумар
источник
1 
   <head>
       <style>

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

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

простой и начинающий :)


источник
0 

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

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

      <span>40%</span>

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

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

шаши кумар
источник
3
Хотя этот код может ответить на вопрос, предоставление дополнительного контекста относительно того, почему и / или как он отвечает на вопрос, значительно улучшит его долгосрочную ценность. Пожалуйста , измените свой ответ , чтобы добавить некоторые пояснения.
Тоби Спейт
0

Если вы используете sass для написания CSS, вы можете:

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

Какие выходы:

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

Попробуйте здесь: https://www.sassmeister.com/

Rimian
источник