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

Как вы рисуете круг, используя HTML5 и CSS3?

Можно ли также поместить текст внутри?

Ответ 1

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

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

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

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

Ответ 2

Это вполне возможно в HTML 5. Ваши варианты: Встроенный SVG и <canvas> тег.

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

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

Ответ 3

Есть несколько юникодовых кругов, которые вы могли бы использовать:

* { font-size: 50px; }

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

Ответ 4

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

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

Ответ 5

Начиная с 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>

Ответ 6

Вы можете использовать атрибут 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 заключается в поддержке предварительно-CSS3-окончательных версий Gecko и Webkit.)

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

Ответ 7

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

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

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>

Ответ 8

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

Ответ 9

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

Ответ 10

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

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

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

Ответ 11

Просто выполните следующие теги script:

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

Ответ 12

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

Ответ 13

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

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

Ответ 14

   <head>
       <style>

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

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

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

Ответ 15

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

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

      <span>40%</span>

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

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

Ответ 16

Если вы используете 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/