Половина круга с CSS (граница, только контур)

Я пытаюсь создать круг с CSS, который выглядит как на следующем рисунке:

и используя определения только CSS. Нет SVG, WebGL, DirectX, [...] разрешено.

Я попытался нарисовать полный круг и затухать половину его с помощью другого div, и он действительно работает, но я ищу более элегантную альтернативу.

Ответы

Ответ 1

Вы можете использовать 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;
}

ОБНОВЛЕННЫЙ ДЕМО. ( Демо без цвета фона)

Ответ 2

У меня была подобная проблема не так давно, и именно так я ее решил

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