具有部分边框的HTML5/CSS3圈子

是否可以使用HTML5 / CSS3创建一个圆圈，该边框只能绕圈子的一部分？如果没有，我可以用什么技术来完成这个效果？我更喜欢使用纯DOM元素，但如果我必须可以画画布或旋转SVG。

解决方法

是的，这是可能的 – 见：

demo

HTML：

<div class='circle'>
    <div class='arc'></div>
</div>

CSS：

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

原文地址：https://www.jb51.cc/html5/168994.html