html5实现边框为圆圈,带有部分边框的HTML5 / CSS3圆

小编典典

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

演示_

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

}

2020-05-16