Pure CSS를 사용하여 원을 만드는 방법은 무엇입니까?

Originally posted here!

순수 CSS를 사용하여 원을 만들 수 있습니다. 🔥

TL;DR

/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}

더 명확한 설명을 원하시면 계속 읽으십시오. 🚀

먼저 정사각형에는 width 가 있으므로 동일한 height 및 width = height를 사용하여 CSS에서 정사각형 모양을 만들어 보겠습니다.
width와 height를 100px 이렇게 하면,

/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
}

다음과 같이 red의 간단한 배경색을 지정해 보겠습니다.

/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
}

이제 경계 반경을 50% 이상으로 설정하여 완벽한 원으로 변환하기만 하면 됩니다. 이런식으로 할 수 있는데,

/* Make a Circle in pure CSS */
.circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%;
}

그게 다야! 😃 동그란 모양을 만들었어요.

JSBin에 있는 코드를 참조하세요.

더 작은 원을 만들려면 width 및 height를 훨씬 더 작은 픽셀 값으로 변경합니다.

원이 10px 와 width 에서 height 가 되기를 원한다고 가정해 봅시다. 이런식으로 할 수 있는데,

/* Much smaller Circle in pure CSS */
.circle {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
}

😃 유용하셨다면 공유해 주세요.