-2

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 -->
Morad Hamdy
  • 115
  • 1
  • 11
  • Have you tried doing this yourself? Code examples? Why do you need the background transparent? Are you trying to overlay it with text? – ryantpayton Sep 09 '16 at 13:07
  • Yes i tried!! My try was with making 2 elements. The 1st is rounded with 80px * 80px colorful background. The 2nd is rectangle with 80px * 40px white background. I need this part transparent when i choose to use background image for the body for example. I need it transparent. Here example http://codepen.io/moradxd/pen/EgVVdg – Morad Hamdy Sep 09 '16 at 13:24
  • @Pete .. I didn't find the same idea purpose in that question. – Morad Hamdy Sep 09 '16 at 14:20
  • Guys, please i have question for 2 guys who made -2 for me. i think this happens always when the question not providing demo. But in my case i already don't know how is the HTML code structure should be! So how i can provide a demo! I just provided some screenshot for the idea imagination. – Morad Hamdy Sep 09 '16 at 14:22

1 Answers1

7

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>
Mohammad Usman
  • 37,952
  • 20
  • 92
  • 95
  • nice use of box shadow! – Pete Sep 09 '16 at 13:31
  • @MuhammadUsman .. Thanks a lot :) .. I have specific related question, can you set the dimension for the box to 80px * 80px, and for the white element 80px * 40px ? – Morad Hamdy Sep 09 '16 at 14:44
  • @MoradHamdy you are welcome. I've set an example for you. If you need modification you can play with it and use exact values that you need. – Mohammad Usman Sep 09 '16 at 14:52