Как нарисовать круг на html-странице?
Как вы рисуете круг с помощью HTML5 и CSS3?
можно ли также поместить текст внутрь?
16 ответов
вы не можете нарисовать круг как таковой. Но вы можете сделать что-то похожее на круг.
вам нужно создать прямоугольник с закругленными углами (через border-radius
) что составляет половина ширины / высоты круга, который вы хотите сделать.
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}
<div id="circle"></div>
вполне возможно HTML 5. Ваши варианты: встроенный 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>
есть несколько кругов unicode, которые вы можете использовать:
* { font-size: 50px; }
○
◌
◍
◎
●
border-radius:50%
Если вы хотите, чтобы круг адаптировался к любым размерам контейнера (например, если текст имеет переменную длину)
не забудьте -moz-
и -webkit-
префиксы!
С 2015 года вы можете сделать это и центрировать текст с помощью всего 15 строк CSS (Скрипка):
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, на Windows7, и это действительно HTML5 (экспериментальный) и CSS3.
вы можете использовать атрибут 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;"> </div>
(причина использования расширений-moz и-webkit заключается в поддержке предварительных CSS3-окончательных версий Gecko и Webkit.)
есть больше примеров на на этой странице. Что касается вставки текста, вы можете это сделать, но вы должны помнить о позиционировании, так как модель заполнения полей большинства браузеров по-прежнему использует внешний квадрат.
технически нет способа нарисовать круг с помощью HTML (нет <circle>
HTML tag), но круг можно нарисовать.
лучший способ нарисовать один, чтобы добавить border-radius: 50%
до тега div
. Вот пример:
<div style="width: 50px; height: 50px; border-radius: 50%;">You can put text in here.....</div>
вы можете использовать свойство border-radius или сделать div с фиксированной высотой и шириной и фоном с кругом png.
.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>
просто сделайте следующее в тегах скрипта:
<!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>
и там вы идете вы получили свой круг.
.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;
}
-
h1 { border: dashed 2px blue; width: 200px; height: 200px; border-radius: 100px; text-align: center; line-height: 60px; }
<h1> <br>hello world</h1>
#
<head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>
простые и новичок :)
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
to включить элементы во все виды форм
Примечание: клип-путь не (пока) поддерживается всеми браузеры
вы можете поместить текст внутрь круга, просто написав текст внутри тегов цели
вот так:
<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>
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->
Если вы используете 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/