切割子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; 
}