Я пытаюсь создать круг с 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>