I want to make half border of a circle which fades out at the end, like this:
I managed to create a border that fades out to the bottom like this:
#cont{
background: -webkit-linear-gradient(green, #fff);
width: 300px;
height: 300px;
border-radius: 1000px;
padding: 10px;
}
#box{
background: black;
width: 300px;
height: 300px;
border-radius: 1000px;
}<div id="cont">
<div id="box"></div>
</div>However, this circle does not fade out at 50% but on the bottom. Also the border does not become thinner. How can I achieve this?
>Solution :
I managed to make it using positions. I assume this would give a better understanding on how to make these kind of shapes.
#cont {
background: -webkit-linear-gradient(green -50%, #fff);
width: 300px;
height: 300px;
border-radius: 100%;
padding: 10px;
position: relative;
top: 0;
left: 0;
}
#box {
background: #fff;
width: 320px;
height: 320px;
border-radius: 100%;
position: absolute;
top: 2%;
left: 0.1%;
}<div id="cont">
<div id="box"></div>
<div id="box2"></div>
</div>