带有部分边框的HTML5 / CSS3圆

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以仅使用HTML5 / CSS3创建一个圆，该HTML5 /

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

回答：

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

演示_

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

以上是 带有部分边框的HTML5 / CSS3圆 的全部内容， 来源链接： utcz.com/qa/424323.html

回到顶部