使用css属性—clip-path完成胶囊导航按钮
先看效果
主要是为了实现胶囊内的颜色分割：
更多API
clip-path 属性常用的函数：
| API | 描述 | 参数 |
|---|---|---|
| circle() | 创建一个圆形裁剪区域 | 半径和圆心的坐标 |
| ellipse() | 创建一个椭圆形裁剪区域 | 横轴和纵轴的半径以及圆心的坐标 |
polygon() | 创建一个多边形裁剪区域 | 构成多边形的顶点坐标 |
| path() | 使用 SVG 路径来定义裁剪区域 | 路径的字符串表示形式 |
上代码
HTML
<div class="capsule-button">
<span class="left-text">Left</span>
<span class="right-text">Right</span>
</div>
CSS
/* 胶囊按钮的样式 */
.capsule-button {
display: flex;
width: 250px;
height: 50px;
border: 2px solid #42a5f5;
border-radius: 35px;
overflow: hidden;
font-size: 16px;
text-align: center;
line-height: 50px;
font-weight: bold;
color: #fff;
}
/*左半部分：浅蓝色*/
.left-text {
width: 45%;
height: 100%;
background-color: #bbdefb;
clip-path: polygon(0 0, 100% 0, 80% 100%, 0 100%);
color: black;
}
/*右半部分*/
.right-text {
width: 55%;
}