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>
It's possible.
- Draw two circles using
border-radius
one on top of another. - Make one or more arc of both circles
transparent
by changingborder-color
. - Use
transform
to rotate the second circle and you will have the arc of the size you need.
Here is the demo: http://jsfiddle.net/kJXwZ/2/
.wrapper {
position: relative;
margin: 20px;
}
.arc {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
border-radius: 100%;
border: 1px solid;
}
.arc_start {
border-color: transparent red red red;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.arc_end {
border-color: red red red transparent;
-webkit-transform: rotate(75deg);
-moz-transform: rotate(75deg);
-ms-transform: rotate(75deg);
-o-transform: rotate(75deg);
transform: rotate(75deg);
}
<div class="wrapper">
<div class="arc arc_start"></div>
<div class="arc arc_end"></div>
</div>