是否可以使用HTML5 / CSS3创建一个圆圈，该边框只能绕圈子的一部分？如果没有，我可以用什么技术来完成这个效果？我更喜欢使用纯DOM元素，但如果我必须可以画画布或旋转SVG。
解决方法
是的，这是可能的 – 见：
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: '';
}
