Morad Hamdy Morad Hamdy - 2 months ago 8
CSS Question

How to make this rounded shape with css

How i can make this shape with keeping the inside rounded area transparent?

Custom rounded shape

Here example for what i want to implement: http://codepen.io/moradxd/pen/EgVVdg



body {
background: #16c5de;
}

.shape-box {
width: 80px;
height: 80px;
position: relative;
margin: 100px auto;
}

.element-1,
.element-2 {
display: block;
position: relative;
}

.element-1 {
width: 80px;
height: 40px;
background: #fff;
position: absolute;
bottom: 0;
z-index: 0;
}

.element-2 {
width: 80px;
height: 80px;
background: #16c5de;
z-index: 1;
border-radius: 100%;
}

<div class="shape-box">
<span class="element-1"></span>
<span class="element-2"></span>
</div><!-- .shape-box -->




Answer

You can try :before or :after pseudo element and box-shadow as shown below.

body {
  background: #007aff;
  padding: 40px;
  margin: 0;
}
.box {
  position: relative;
  overflow: hidden;
  height: 100px;
  width: 100px;
}

.box:before {
  box-shadow: 0 0 0 100px #fff;
  position: absolute;
  border-radius: 100%;
  margin-left: -60px;
  height: 200px;
  content: '';
  width: 120px;
  left: 50%;
  bottom: 0;
} 
<div class="box"></div>

Comments