具有部分边框的HTML5 / CSS3圆形 [英] HTML5 / CSS3 Circle with Partial Border

问题描述

是否可以只使用HTML5 / CSS3创建一个圆圈，该边框的边框只能绕过圆圈？如果没有，我可以使用什么技术来实现这种效果？我喜欢使用纯DOM元素，但如果我必须绘制在画布上或旋转一个SVG。

解决方案

可以，请参阅：

> < 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; 
 / *确保top&左边的值是 - 边框的宽度* / 
 / *右下角是父圆的中心* / 
 top：-1em;右：50％;底部：50％; left：-1em; 
 / *转换原点是右下角* / 
 transform-origin：100％100％; 
 / *旋转任何角度* / 
 / *斜角为90deg  - 你想要的弧角* / 
 transform：rotate（45deg）skewX（30deg）; 
} 
 .arc：before {
 box-sizing：border-box; 
 display：block; 
 border：solid 1em navy; 
 width：200％;高度：200％; 
 border-radius：50％; 
 transform：skewX（-30deg）; 
 content：''; 
} 
  

Is it possible to create a circle using only HTML5 / CSS3 which has a border that only goes part way around the circle? If not, what techniques can I use to accomplish this effect? I would prefer to use pure DOM elements, but if I have to I can draw on canvas or spin up an SVG.

解决方案

Yes, it is possible - see this:

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

这篇关于具有部分边框的HTML5 / CSS3圆形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！