Html5/Css3 Circle with Partial Border

How to use CSS to give a circle a partial border

You can use a combination of:

  • clip-path: polygon()
  • border-radius
  • ::before pseudo-element

to create any partial circle border you wish.

Working Example:

body {width: 420px}
.circle {position: relative;float: left;width: 112px;height: 112px;margin: 6px 6px 12px 6px;padding: 6px;background-color: rgb(255, 0, 0);border-radius: 50%;}
.circle::before {content: '';display: block;position: absolute;top: 0;left: 0;width: 124px;height: 124px;background-color: rgb(255, 255, 255);}
.circle::after {content: '';position: absolute;top: 0;left: 0;display: block;width: 100px;height: 100px;margin: 12px;background-color: rgb(255, 255, 0);border-radius: 50%;}
.circle:nth-of-type(1)::before {clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 50% 50%, 50% 100%, 0% 100%);}
.circle:nth-of-type(2)::before {clip-path: polygon(0% 0%, 100% 0%, 100% 30%, 50% 50%, 30% 100%, 0% 100%);}
.circle:nth-of-type(3)::before {clip-path: polygon(0% 0%, 100% 0%, 100% 10%, 50% 50%, 10% 100%, 0% 100%);}
.circle:nth-of-type(4)::before {clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);}
.circle:nth-of-type(5)::before {clip-path: polygon(0% 0%, 30% 0%, 50% 50%, 30% 100%, 0% 100%);}
.circle:nth-of-type(6)::before {clip-path: polygon(0% 0%, 10% 0%, 50% 50%, 10% 100%, 0% 100%);}
.circle:nth-of-type(7)::before {clip-path: polygon(0% 10%, 50% 50%, 0% 90%, 0% 100%);}
.circle:nth-of-type(8)::before {clip-path: polygon(0% 30%, 50% 50%, 0% 70%, 0% 100%);}
.circle:nth-of-type(9)::before {clip-path: polygon(0% 45%, 50% 50%, 0% 55%, 0% 100%);}
<div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div><div class="circle"></div>

HTML5 / CSS3 Circle with Partial Border

Yes, it is possible - see this:

demo

.circle {
position: relative;
margin: 7em auto;
width: 16em;
height: 16em;
border-radius: 50%;
background: lightblue;
}

.arc {
overflow: hidden;
position: absolute;
/* make sure top & left values are - the width of the border */
/* the bottom right corner is the centre of the parent circle */
top: -1em;
right: 50%;
bottom: 50%;
left: -1em;
/* the transform origin is the bottom right corner */
transform-origin: 100% 100%;
/* rotate by any angle */
/* the skew angle is 90deg - the angle you want for the arc */
transform: rotate(45deg) skewX(30deg);
}

.arc:before {
box-sizing: border-box;
display: block;
border: solid 1em navy;
width: 200%;
height: 200%;
border-radius: 50%;
transform: skewX(-30deg);
content: '';
}
<div class='circle'>
<div class='arc'></div>
</div>

Is it possible to draw a partial circle outline in CSS (open ring shape)?

To create a circle that gradually draws it's outer path, use SVG.

SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself.

Then use a CSS animation to gradually change the stroke-dashoffset to move the dash around the perimeter of your circle.

circle {  fill: white;  stroke: black;  stroke-width: 2;  stroke-dasharray: 250;  stroke-dashoffset: 1000;  animation: rotate 5s linear infinite;}
@keyframes rotate { to { stroke-dashoffset: 0; }}
<svg height="100" width="100">  <circle cx="50" cy="50" r="40" /></svg>

Half circle with CSS (border, outline only)

You could use border-top-left-radius and border-top-right-radius properties to round the corners on the box according to the box's height (and added borders).

Then add a border to top/right/left sides of the box to achieve the effect.

Here you go:

.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;
}

WORKING DEMO.

Alternatively, you could add box-sizing: border-box to the box in order to calculate the width/height of the box including borders and padding.

.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;
}

UPDATED DEMO. (Demo without background color)

Css circle with border that is hollow inside?

You can use poiner-events: none to delegate clicks and hovers to covered elements.
This works for all major browsers and for IE since version 11.

.inner-circle{  display: inline-block;  width: 50px;  height: 50px;  border-radius: 50%;  border-style: solid;  border-width: 2px;  border-color: blue;  background-color: rgba(0, 0, 0, 0);  position: absolute;  top:0;  left:0;  pointer-events:none;}
<input type="checkbox" /><span class="inner-circle"></span>

css half bordered circle with transparent shapes on it

You can use mask combined with gradient to achieve this:

.box {  --b: 10px; /* 10px of visible border */
width:150px; height:150px; display:inline-block; border-radius:50%; background:linear-gradient(transparent calc(100% - var(--fill)),#00EFAF 0); -webkit-mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b))); mask:radial-gradient(farthest-side,transparent calc(99.5% - var(--b)),#fff calc(100% - var(--b)));}
body { background:#f2f2f2;}
<div class="box" style="--fill:20%"></div><div class="box" style="--fill:50%;--b:20px;"></div><div class="box" style="--fill:80%;--b:5px;"></div>


Related Topics



Leave a reply



Submit