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
How to Create Links With 'Target="_Blank"' in Markdown
Why Is There a Vertical Scroll Bar If Parent and Child Have the Same Height
Overflow:Hidden Dots At the End
Imitating a Blink Tag With Css3 Animations
Text Overflow Ellipsis on Two Lines
How to Tell If a Browser Is in "Quirks" Mode
How to Get Folder Directory from HTML Input Type "File" or Any Other Way
Angular 5 Formgroup Reset Doesn't Reset Validators
Why Would a Developer Place a Forward Slash At the Start of Each Relative Path
Displaying Unicode Symbols in Html
Youtube Autoplay Not Working on Mobile Devices With Embedded Html5 Player
Html Table With Horizontal Scrolling (First Column Fixed)
What Characters Can Be Used For Up/Down Triangle (Arrow Without Stem) For Display in Html
CSS Background-Size: Cover Replacement for Mobile Safari