美文网首页
径向渐变制作圆外角

径向渐变制作圆外角

作者: GodlinE | 来源:发表于2017-05-30 20:01 被阅读0次
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>

相关文章

网友评论

      本文标题:径向渐变制作圆外角

      本文链接:https://www.haomeiwen.com/subject/qowrfxtx.html