带边框半径的透明背景

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>

带边框半径的透明背景

Transparent background with border-radius

html

css

css-shapes