Как нарисовать круг на HTML-странице? - PullRequest
Новая
       56

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

101 голосов
/ 03 августа 2011

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

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

Ответы [ 16 ]

165 голосов
/ 03 августа 2011

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

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

    #circle {
      width: 50px;
      height: 50px;
      -webkit-border-radius: 25px;
      -moz-border-radius: 25px;
      border-radius: 25px;
      background: red;
    }
<div id="circle"></div>
73 голосов
/ 04 августа 2011

Это вполне возможно в HTML 5 . Вы можете выбрать следующие параметры: Embedded SVG и <canvas> tag .

Чтобы нарисовать круг во встроенном 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>
50 голосов
/ 21 декабря 2014

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

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

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

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

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

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

18 голосов
/ 04 августа 2011

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

Не забудьте префиксы -moz- и -webkit-!

7 голосов
/ 29 июля 2015

Начиная с 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- с это работает на IE11, Firefox, Chrome и Opera, на Windows7, и это действительно HTML5 (экспериментальный) и CSS3.

4 голосов
/ 15 мая 2018

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>

Фактически, вы можете использовать clip-path до , превращая элементы во все виды фигур

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

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

<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>
4 голосов
/ 13 октября 2013

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

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

<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
4 голосов
/ 03 августа 2011

Вы можете использовать атрибут border-radius, чтобы присвоить ему border-radius, эквивалентный 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.)

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

3 голосов
/ 27 апреля 2017 

.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>
3 голосов
/ 03 августа 2011

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

Страница:
...