径向渐变制作圆外角
2017-05-30 本文已影响0人
GodlinE
image.png
<style>
.box{
width: 25px;
height: 25px;
background: radial-gradient(circle 50px at 100% 100%,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,red 50.01%,red);
float: left;
}
.box1{
width: 100px;
height: 50px;
background-color: red;
float: left;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.box2{
width: 25px;
height: 25px;
background: radial-gradient(circle 50px at 0% 100%,rgba(255,255,255,0) 0%,rgba(255,255,255,0) 50%,red 50.01%,red);
float: left;
}
</style>
<body>
<div class="box4">
<div class="box2"></div>
<div class="box1"></div>
<div class="box"></div>
</div>
</body>
