答案 0 :(得分:2)
您可以使用伪元素::before
和::after
来实现:
.box {
position: relative;
background: #66d;
width: 60px;
height: 60px;
border-radius: 50%;
border: 6px solid #ddd;
}
.box::before, .box::after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: -6px; /* width of the border */
border-radius: 50%;
border: 6px solid transparent;
content: '';
}
.box::before {
border-top-color: #bbb;
transform: rotate(45deg); /* 45deg to start right on top */
}
.box::after {
border-right-color: #bbb; /* You can color the borders you want… */
/* transform: rotate(0deg); /* … and adjust the rotation if needed */
}
<div class="box"></div>
请注意,如果需要,可以使更多边框可见。
希望它有所帮助。
答案 1 :(得分:1)
您可以使用渐变来创建:
.box {
width:100px;
height:100px;
border-radius:50%;
background:
radial-gradient(circle at center, blue 60%,transparent 60.1%),
linear-gradient(to right,#fff 50%,transparent 0),
linear-gradient(50deg,#fff 50%,transparent 0),
red;
}
&#13;
<div class="box">
</div>
&#13;