切割子div作爲圓

Question

我正在嘗試做一個整潔的加載欄，但爲此我需要你的幫助。

我試圖做到在CSS的東西，看起來像這樣： 用下面的HTML：

<div class="example"> 
    <div class="example-inner"></div> 
    <div class="example-inner"></div> 
    <div class="example-inner"></div> 
    <div class="example-inner"></div> 
    <div class="example-inner"></div> 
</div> 

這裏是我設法到目前爲止做的（這不是很多，我知道）：對你懶惰的Codepen /直視：

.example{ 
 
    border-radius: 50%; 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #f0f0f0; 
 
    font-weight: bold; 
 
    color: #333; 
 
} 
 
.example-inner{ 
 
    width:100%; 
 
    height:20px; 
 
    border: 1px solid black; 
 
}

<div class="example"> 
 
    <div class="example-inner"></div> 
 
    <div class="example-inner"></div> 
 
    <div class="example-inner"></div> 
 
    <div class="example-inner"></div> 
 
    <div class="example-inner"></div> 
 
</div>

提前感謝！

Answer 1

將overflow:hidden添加到父項。

* { 
 
    box-sizing: border-box; 
 
} 
 
.example { 
 
    border-radius: 50%; 
 
    overflow: hidden; 
 
    /* add this */ 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: #f0f0f0; 
 
    font-weight: bold; 
 
    color: #333; 
 
    border: 1px solid black; 
 
} 
 
.example-inner { 
 
    height: 20px; 
 
    border: 1px solid black; 
 
}

<div class="example"> 
 
    <div class="example-inner"></div> 
 
    <div class="example-inner"></div> 
 
    <div class="example-inner"></div> 
 
    <div class="example-inner"></div> 
 
    <div class="example-inner"></div> 
 
</div>

Answer 2

只需添加溢出：隱藏例如

.example{ 
    border-radius: 50%; 
    width: 100px; 
    height: 100px; 
    background-color: #f0f0f0; 
    font-weight: bold; 
    color: #333; 
    overflow: hidden; 
}