CSS3绘制外圆角按钮

接下来这个按钮形状,常见于 Tab 页上,类似于 Chrome 的分页:
 
CSS3绘制按钮
 
我们对这个按钮形状拆解一下,这里其实是 3 块的叠加:
 
CSS3绘制按钮
 
只需要想清楚如何实现两侧的弧形三角即可。这里还是借助了渐变 -- 径向渐变,其实他是这样,如下图所示,我们只需要把黑色部分替换为透明即可,使用两个伪元素即可:
 
CSS3绘制按钮
 
代码如下:
 
<div class="outside-circle">outside-circle</div>
.outside-circle {
    position: relative;
    background: #e91e63;
    border-radius: 10px 10px 0 0;
 
    &::before {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        left: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 0 0, transparent 20px, #e91e63 21px);
    }
    &::after {
        content: "";
        position: absolute;
        width: 20px;
        height: 20px;
        right: -20px;
        bottom: 0;
        background: #000;
        background:radial-gradient(circle at 100% 0, transparent 20px, #e91e63 21px);
    }
}
即可得到:
CSS3绘制按钮

【本文关键词】:CSS3绘制按钮