[英]Transparent background with border-radius
我想使用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>
您可以使用盒子阴影在.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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.