CSS가있는 반원 (테두리, 윤곽선 만)

CSS가있는 반원 (테두리, 윤곽선 만)

---

다음 그림과 똑같은 CSS로 원을 만들려고합니다.

... 하나만 사용 div:

<div class="myCircle"></div>

CSS 정의 만 사용 합니다 . SVG, WebGL, DirectX, [...]는 허용되지 않습니다.

나는 완전한 원을 그리고 그것의 절반을 다른 것으로 희미하게하려고 노력했지만 div작동하지만 더 우아한 대안을 찾고 있습니다.

---

border-top-left-radius및 border-top-right-radius속성을 사용 하여 상자의 높이 (및 추가 된 테두리)에 따라 상자의 모서리를 둥글게 할 수 있습니다 .

그런 다음 상자의 상단 / 오른쪽 / 왼쪽에 테두리를 추가하여 효과를 얻습니다.

여기 있습니다 :

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    background-color: gold;
    border-top-left-radius: 110px;  /* 100px of height + 10px of border */
    border-top-right-radius: 110px; /* 100px of height + 10px of border */
    border: 10px solid gray;
    border-bottom: 0;
}

작업 데모 .

또는 box-sizing: border-box테두리 및 패딩을 포함하여 상자의 너비 / 높이를 계산하기 위해 상자에 추가 할 수 있습니다 .

.half-circle {
    width: 200px;
    height: 100px; /* as the half of the width */
    border-top-left-radius: 100px;
    border-top-right-radius: 100px;
    border: 10px solid gray;
    border-bottom: 0;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

업데이트 된 데모 . ( 배경색이없는 데모 )

---

얼마 전에 비슷한 문제가 있었고 이것이 내가 해결 한 방법이었습니다.

.rotated-half-circle {
  /* Create the circle */
  width: 40px;
  height: 40px;
  border: 10px solid black;
  border-radius: 50%;
  /* Halve the circle */
  border-bottom-color: transparent;
  border-left-color: transparent;
  /* Rotate the circle */
  transform: rotate(-45deg);
}

<div class="rotated-half-circle"></div>

---

나는 달성하기 위해 백분율 방법을 사용합니다.

        border: 3px solid rgb(1, 1, 1);
        border-top-left-radius: 100% 200%;
        border-top-right-radius: 100% 200%;

참조 URL : https://stackoverflow.com/questions/22415651/half-circle-with-css-border-outline-only