CODEWITHSUNDEEP
htmlcssoverflow
Saif Obeidat
Saif Obeidat

Reputation: 148

how to cut an overflow div css

I need to know how to cut that gray part from the blue box.

enter image description here

The red arrows on the image bellow show which part I would like to cut from the blue box. This is the code I have:

.father {
  height: 400px;
  width: 400px;
  margin: 150px auto;
  position: relative;
}

.border {
  position: relative;
  bottom: 50px;
  margin: auto;
  border-radius: 50%;
  width: 96%;
  height: 30%;
  background-color: #DDD;
}
	
<div class="father">
  <div class="border"></div>
</div>

Upvotes: 1

Views: 7404

Answers (4)

ExploreNav
ExploreNav

Reputation: 396

.father 
{
    height: 400px;
    width: 400px;
    margin: 150px auto;
    position: relative;
    background: #04aada;
    border-radius: 50px 50px 0 0;
}

.border 
{
    position: relative;
    bottom: 25px;
    margin: auto;
    border-radius: 50%;
    width: 96%;
    height: 30%;
    background-color: #fff;
    z-index: 1;
    box-shadow: 0px -4px 0px #04aada;
}
<div class="father">
  <div class="border"></div>
</div>

Upvotes: 0

Head In Cloud
Head In Cloud

Reputation: 2051

Are you looking for this?

.father {
  height:400px;
  width:400px;
  margin:150px auto;
  position:relative;
  background:green;
}

.border {
  position:relative;
  bottom:50px;
  margin:auto;
  border-radius:50%;
  width:96%;
  height:30%;
  background-color:#DDD;
  z-index:-9;
}
<div class="father">
  <div class="border"></div>
</div>

Upvotes: 1

Ivan
Ivan

Reputation: 40668

From what I understand you would like to cut off the grey part outside the blue area. If so, here's how you do it.

.father {
  height: 400px;
  width: 400px;
  margin: 150px auto;
  position: relative;
  background: lightblue;
  overflow: hidden;
}

.border {
  position: relative;
  bottom: 50px;
  margin: auto;
  border-radius: 50%;
  width: 96%;
  height: 30%;
  background-color: #DDD;
  z-index: 1;
}
<div class="father">
  <div class="border"></div>
</div>

Upvotes: 4

vijayP
vijayP

Reputation: 11502

Can you see this approach:

border-top-left-radius: 8px;
border-top-right-radius: 8px;


.father {
  height: 400px;
  width: 400px;
  margin: 150px auto;
  position: relative;
  background: lightblue;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.border {
  position: relative;
  bottom: 50px;
  margin: auto;
  border-radius: 50%;
  width: 100%;
  height: 30%;
  background-color: #DDD;
}
<div class="father">
  <div class="border"></div>
</div>

Upvotes: 1

Related Questions