CODEWITHSUNDEEP
htmlcss
NonameSL
NonameSL

Reputation: 1475

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!

Upvotes: 1

Views: 58

Answers (2)

Markfred Chen
Markfred Chen

Reputation: 21

just add overflow:hidden in example

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

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115009

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>

Upvotes: 5

Related Questions