使用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%;
}