CSS half surrounded by a circle
I am trying to create a half arc around a full circle as shown below. How can I create this in css? So far I have created a circle, but I don't know how to make an arch.
.circle {
width: 45px;
height: 45px;
border-radius: 50%;
font-size: 20px;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
background: #BDBDBD;
}
<div class="circle">1</div>
source to share
You can use a pseudo element :after
to create a semicircle. You must also use the bounding radius bottom-right
and top-right
.
.circle {
width: 100px;
height: 100px;
margin: 50px;
position: relative;
line-height: 100px;
text-align: center;
border-radius: 50%;
background: #BDBDBD;
color: white;
}
.circle:after {
content: '';
position: absolute;
top: 0;
right: 0;
border: 10px solid gray;
border-left: 0;
border-bottom-right-radius: 100px;
border-top-right-radius: 100px;
width: 55px;
height: calc(100% + 10px);
transform: translate(15px, -15px);
}
<div class="circle">1</div>
source to share
This is based on jcaron's comment on the question. I wrapped the circle with an outer circle div to create a "white space between grays" area.
Nenad Varar's answer, however, seems to be much cleaner.
.outer-circle {
width: 45px;
height: 45px;
border-style: solid;
border-width: 1x 1px 0 0;
border-color: #BDBDBD #BDBDBD transparent transparent;
border-radius: 50%;
font-size: 20px;
color: #fff;
line-height: 45px;
text-align: center;
position: relative;
background: #fff;
padding: 3px;
transform: rotate(45deg);
}
.circle {
background: #BDBDBD;
border-radius: 50%;
transform: rotate(-45deg);
}
<div class="outer-circle">
<div class="circle">
1
</div>
</div>
source to share
Yes, use it pseudo selector
, but your background parent
must be white
either any other color that blends with the pseudo selector, i.e. the center part between the circle and half of the arc, or using a canvas.
body {
background: #fff;
}
div {
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%;
text-align: center;
position: relative;
margin-top: 30px;
color: #fff;
padding-top: 40px;
box-sizing: border-box;
}
div:after {
content: "";
position: absolute;
border-top: 70px solid transparent;
border-left: 70px solid transparent;
border-right: 70px solid #ccc;
border-bottom: 70px solid #ccc;
border-radius: 50%;
z-index: -2;
transform: rotate(-45deg);
left: -15px;
top: -20px;
}
div:before {
content: "";
position: absolute;
border-top: 60px solid transparent;
border-left: 60px solid transparent;
border-right: 60px solid #fff;
border-bottom: 60px solid #fff;
border-radius: 50%;
z-index: -1;
transform: rotate(-45deg);
top: -10px;
left: -7px;
}
<div>1</div>
source to share