带有部分边框的HTML5 / CSS3圆

Question

是否可以仅使用HTML5 / CSS3创建一个圆，该HTML5 /
CSS3的边框仅在圆的一部分上延伸？如果没有，我可以使用什么技术来达到这种效果？我更喜欢使用纯DOM元素，但是如果需要的话，我可以在画布上绘画或生成SVG。

Answer 1

是的，有可能-看到这个：

演示_

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