帶邊框半徑的透明背景

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-q-c-640-480-7.jpg'); 
 
    background-size:cover;

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