圈半邊框CSS

Question

我試圖創建CSS圓圈，它看起來酷似以下圖片：

如何使用CSS使這個？

Answer 1

我能想到的最簡單的方法是使用border-radius上的灰色div來製作圓圈並將黑色邊框應用於兩個相鄰的邊。然後，您可以簡單地旋轉元素，使邊框位於頂部。

div.circleThing { 
 
    width:100px; height:100px; 
 
    background:#666; 
 
    border:10px solid black; 
 
    border-radius:50%; 
 
    border-bottom-color:#fff; 
 
    border-right-color:#fff; 
 
    transform: rotate(45deg); 
 
}

<div class="circleThing"></div>

Answer 2

，如果你不想旋轉元件另一種可能的選擇是使用哪種放置其父後面的僞元素。

然後添加一個線性漸變背景，截斷爲白色，然後獲得所需的效果。

這確實需要多一點CSS，並且稍微困難一點，但是您可以獲得沒有旋轉元素的優勢。

.circle { 
 
    width: 130px; 
 
    height: 130px; 
 
    background: grey; 
 
    margin: 10px; 
 
    border-radius: 50%; 
 
    position: relative; 
 
} 
 
.circle:before { 
 
    content: ''; 
 
    position: absolute; 
 
    z-index: -1; 
 
    width: 150px; 
 
    height: 150px; 
 
    display: block; 
 
    margin: -10px; 
 
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(0, 0, 0, 1) 100%); 
 
    border-radius: 50%; 
 
}

<div class="circle"></div>