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

问题描述

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

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:

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屋！