HTML5 및 CSS3를 사용하여 원을 어떻게 그리나요?
안에 텍스트를 넣을 수도 있습니까?
답변:
그 자체로는 원을 그릴 수 없습니다. 하지만 원과 똑같은 것을 만들 수 있습니다.
만들려 는 원 의 너비 / 높이 의 절반 인 둥근 모서리 (경유 border-radius)가 있는 사각형 을 만들어야합니다.
#circle {
width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
background: red;
}<div id="circle"></div>border-radius: 50%;잘 작동하는 것을 발견 하고 원하는대로 크기를 변경합니다. 색상의 경우 background-color또는 border.
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>사용할 수있는 몇 가지 유니 코드 서클이 있습니다.
다음과 같은 경우 원에 텍스트를 오버레이 할 수 있습니다.
모든 컴퓨터 / 브라우저에 동일한 글꼴이 설치되어 있지 않기 때문에 다른 시스템에서 동일하게 보일 가능성이 더 높은 경우 사용자 지정 글꼴 (예 : 이 글꼴)을 사용할 수도 있습니다 .
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에서 작동하며 유효한 HTML5 (실험용) 및 CSS3입니다.
MS Edge (2020)에서도 동일합니다.
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;"> </div>(-moz 및 -webkit 확장을 사용하는 이유는 Gecko 및 Webkit의 CSS3 최종 버전 이전 버전을 지원하기위한 것입니다.)
이 페이지 에는 더 많은 예제가 있습니다 . 텍스트를 삽입하는 것에 관해서는 할 수 있지만 대부분의 브라우저의 상자 패딩 모델은 여전히 바깥 쪽 사각형을 사용하므로 위치에 유의해야합니다.
border-radius: 50%;크기에 관계없이 모든 요소를 원으로 바꿉니다. 적어도 만큼으로 height 하고 width 타겟의 그렇지 않으면 타원형으로 바뀌고 동일하다 .
#target{
width: 100px;
height: 100px;
background-color: #aaa;
border-radius: 50%;
}<div id="target"></div>참고 : 브라우저 접두사가되어 있지 경계 반경을 위해 더 이상 필요
또는를 사용 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>스크립트 태그에서 다음을 수행하십시오.
<!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;
} <head>
<style>
#circle{
width:200px;
height:200px;
border-radius:100px;
background-color:red;
}
</style>
</head>
<body>
<div id="circle"></div>
</body>간단하고 초보자 :)
<div class="at-counter-box-content">
<div class="at-counter-content">
<span>40%</span>
</div><!--at-counter-content-->
</div><!--at-counter-box-content-->CSS를 작성하기 위해 sass를 사용하는 경우 다음을 수행 할 수 있습니다.
@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/