user1575921 user1575921 - 6 months ago 33
CSS Question

draw 1/2 or 1/4 equal line width circle line with css

How to draw 1/2 or 1/4 "equal" line width circle with css ?

(not svg)

the whole line not equal width how to fix it

https://jsfiddle.net/ryxq1e91/



.circle {
position: relative;
display: inline-block;

width: 40px;
height: 40px;

background-color: red;
}
.circle >div {
top: 11px;
left: 14px;
}
.circle >div {
position: relative;

width: 12px;
height: 12px;
border-bottom-right: 1px solid rgba(40,40,40,1);
border-bottom: 1px solid rgba(40,40,40,1);
border-bottom-left: 1px solid rgba(40,40,40,1);
border-radius: 8px;
}

<div class="circle">
<div></div>
</div>




Answer

As another option if you want to keep the full div, just make the borders that you don't want transparent, using rgba(0,0,0,0). The only caveat is that it will appear 45 degrees rotated, so just transform it with a transform: rotate(45deg).

Note that I'm unsure what the support for this is.

1/4 Circle

.circle {
    position: relative;
    display: inline-block;

    width: 120px;
    height: 120px;

    background-color: red;
}
.circle >div {
  top: 10px;
  left: 10px;
}
.circle >div {
  position: relative;

  width: 100px;
  height: 100px;
  border-right: 1px solid rgba(0,0,0,0);
  border-bottom: 1px solid rgba(40,40,40,1);
  border-left: 1px solid rgba(0,0,0,0);
  border-top: 1px solid rgba(0,0,0,0);
  border-radius: 50px;
  transform: rotate(45deg);
}
<div class="circle">
  <div></div>
</div>

1/2 Circle

.circle {
    position: relative;
    display: inline-block;

    width: 120px;
    height: 120px;

    background-color: red;
}
.circle >div {
  top: 10px;
  left: 10px;
}
.circle >div {
  position: relative;

  width: 100px;
  height: 100px;
  border-right: 1px solid rgba(40,40,40,1);
  border-bottom: 1px solid rgba(40,40,40,1);
  border-left: 1px solid rgba(0,0,0,0);
  border-top: 1px solid rgba(0,0,0,0);
  border-radius: 50px;
  transform: rotate(45deg);
}
<div class="circle">
  <div></div>
</div>