I'm trying to create a circle with CSS, which looks exactly like on the following picture:
...with only one div
:
<div class="myCircle"></div>
and by using only CSS definitions. No SVG, WebGL, DirectX, [...] allowed.
I've tried to draw a full circle and fading half of it with another div
, and it does work, but I'm looking for a more elegant alternative.
This question is related to
html
css
css-shapes
I had a similar issue not long time ago and this was how I solved it
.rotated-half-circle {_x000D_
/* Create the circle */_x000D_
width: 40px;_x000D_
height: 40px;_x000D_
border: 10px solid black;_x000D_
border-radius: 50%;_x000D_
/* Halve the circle */_x000D_
border-bottom-color: transparent;_x000D_
border-left-color: transparent;_x000D_
/* Rotate the circle */_x000D_
transform: rotate(-45deg);_x000D_
}
_x000D_
<div class="rotated-half-circle"></div>
_x000D_
Below is a minimal code to achieve the effect.
This also works responsively since the border-radius
is in percentage.
.semi-circle{_x000D_
width: 200px;_x000D_
height: 100px;_x000D_
border-radius: 50% 50% 0 0 / 100% 100% 0 0;_x000D_
border: 10px solid #000;_x000D_
border-bottom: 0;_x000D_
}
_x000D_
<div class="semi-circle"></div>
_x000D_
I use a percentage method to achieve
border: 3px solid rgb(1, 1, 1);
border-top-left-radius: 100% 200%;
border-top-right-radius: 100% 200%;
Source: Stackoverflow.com