Transparent background with border-radius

Question

I want to create arc transparent inside border radius with CSS\\html. In fact I want corner div to be transparent and display bottom of page.

 .corner{ float:right; border-top-left-radius:60%; width:50px; height:48px; margin-top:2px; background:#fff; background:rgba(f,f,f,0.1); } .div{ background-color: rgb(50,20,70); width:130px; height:50px; } .left{ float:left; width:70px; height:48px; margin-top:2px; color:white; } 

  <div class="div"> <div class="left">345345</div> <div class="corner"></div> </div> 

Answer 1

You can use a box-shadow to keep a transparent background on .corner :

 .corner { float: right; border-top-left-radius: 60%; width: 50px; height: 48px; margin-top: 2px; box-shadow:0 0 0 500px rgb(50, 20, 70); } .div { overflow:hidden; width: 130px; height: 50px; } .left { float: left; width: 70px; height: 48px; margin-top: 2px; color: white; } body{ background:url('http://lorempixel.com/output/people-qc-640-480-7.jpg'); background-size:cover; 

 <div class="div"> <div class="corner"></div> <div class="left">345345</div> </div>