透明背景與邊框半徑

Question

我想使用CSS \\ html創建邊界半徑內的弧形透明。 實際上，我希望角落div是透明的並顯示頁面底部。

 .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

您可以使用盒子陰影在.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>