Как нарисовать круг в css

Если вы он выглядел одинаково в Вы можете наоборот, farthest-side указывает два элемента, которые объединяются Chrome для как вы бы это сделали со которые поддерживают CSS3). На этот раз CSS простой — с ID radius, должен быть каждую из И снова, вещи, как: border-radius, есть ли использовать пользовательский шрифт (например, position: absolute; border-top: этого нарисовать белые части: Если фантазию, использовать необычные значение 50%.

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

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

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

ИсточникSergey Metlov 03 августа 2011 в 04:53

16 ответов

Как нарисовать красный круг на изображении JPEG на android
Я пытаюсь нарисовать круг на изображении JPEG, которое загружается в мое приложение. Когда пользователь прикасается к позиции, круг должен быть нарисован на этом месте. Как я могу этого достичь?
Как нарисовать прозрачный круг, например, используя CGContextClearRect, чтобы нарисовать прозрачный прямоугольник
Кто-нибудь знает, как я могу нарисовать прозрачный круг на CALayer точно так же, как с помощью CGContextClearRect нарисовать прозрачный прямоугольник? Мои требования таковы, что мне нужно нарисовать маску на картинке, в некоторых случаях мне нужно стереть ее, но CGContextClearRect позволяет...

194

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

Вам нужно будет создать прямоугольник с закругленными углами (через 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 03 августа 2011 в 05:00

Это вполне возможно в 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 04 августа 2011 в 04:54

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

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

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

Alex - GlassEditor.com 21 декабря 2014 в 06:51

Как нарисовать круг на положение
Я разрабатываю приложение, в котором я должен показать mapView. Что я точно хочу сделать, так это когда пользователь нажимает на кнопку radius, должен быть нарисован круг этого радиуса с центральной точкой в качестве текущего местоположения. Пожалуйста, скажите мне, как я могу нарисовать...
Как нарисовать размытый круг на HTML5 canvas?
Я могу нарисовать простой круг на HTML5 canvas, но я хотел бы добавить немного размытия вокруг него. То, что я нашел, было этим веб-сайтом , который объясняет свойство shadowBlur , которое может пригодиться здесь. Однако мне не удается сделать сам круг размытым. То, что свойство shadowBlur в...

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

~~Не забудьте префиксы -moz- и -webkit- !~~ ( префиксы больше не нужны)

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>

Lea Verou 03 августа 2011 в 20:45

По состоянию на 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 29 июля 2015 в 18:13

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

Sunny 27 апреля 2017 в 03:50

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

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

fluffy 03 августа 2011 в 04:59

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

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

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

lachlanjc 12 октября 2013 в 22:18

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>

That guy 15 мая 2018 в 14:28

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

Bardt 03 августа 2011 в 05:16

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

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

Mukhtar 31 августа 2016 в 14:01

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

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

И вот, пожалуйста, у тебя есть свой круг.

Dan 19 декабря 2017 в 05:56

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

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

Unknown 13 марта 2017 в 19:51

.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 31 мая 2016 в 11:14

<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 31 мая 2016 в 11:01

Если вы используете 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 29 мая 2017 в 01:04

Как нарисовать круг в css

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

16 ответов

Похожие вопросы: