NonameSL NonameSL - 2 months ago 5
HTML Question

Cutting child divs as circle

I'm trying to make a neat loading bar, but for that I need your help.

I'm trying to accomplish something in css that looks like this:
What I'm trying to accomplish
With the following 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>


Here's what I managed to do so far(it's not much, I know): Codepen / Direct view for you lazy ones:



.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>




Thanks in advance!

Answer

Add overflow:hidden to the parent.

* {
  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>

Comments