径向渐变制作圆外角

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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容