[html] HTML 페이지에서 원을 그리는 방법?

Program / 글쓴이

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>

스 니펫 확장

답변

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>

스 니펫 확장

답변

사용할 수있는 몇 가지 유니 코드 서클이 있습니다.

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

스 니펫 확장

여기에 더 많은 모양이 있습니다 .

다음과 같은 경우 원에 텍스트를 오버레이 할 수 있습니다.

코드 스 니펫 표시

모든 컴퓨터 / 브라우저에 동일한 글꼴이 설치되어 있지 않기 때문에 다른 시스템에서 동일하게 보일 가능성이 더 높은 경우 사용자 지정 글꼴 (예 : 이 글꼴)을 사용할 수도 있습니다 .

답변

border-radius:50% 컨테이너가 가져 오는 크기에 따라 원을 조정하려는 경우 (예 : 텍스트가 가변 길이 인 경우)

-moz-및 -webkit-접두사를 잊지 마세요 !

답변

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)에서도 동일합니다.

답변

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

스 니펫 확장

답변

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 최종 버전 이전 버전을 지원하기위한 것입니다.)

이 페이지 에는 더 많은 예제가 있습니다 . 텍스트를 삽입하는 것에 관해서는 할 수 있지만 대부분의 브라우저의 상자 패딩 모델은 여전히 ​​바깥 쪽 사각형을 사용하므로 위치에 유의해야합니다.