因?yàn)轫?xiàng)目中有這個(gè)需求 需要寫一個(gè)和餓了么或者美團(tuán)一樣的tab切換樣式（切換是到店自提還是外賣配送） 廢話不多說 直接上圖违施。

送貨上門

到店自取

上代碼 滿滿的干活啊

html

<div class="address-tab">
      <div class="tab-list">
          <div class="tab-item left"><span class="text">送貨上門</span></div>
          <div class="tab-item right"><span class="text">到店自提</span></div>
      </div>
</div>

css

$borderRadius: 30px;
    .address-tab{
      height: 88px;
      position: relative;
      overflow: hidden;
      border-radius: 16px 16px 0 0;
      &:after,&:before{
        content: '';
        height: 44px;
        position: absolute;
        width: 100%;
        z-index: 1;
      }
      &:before{
        top: 0;
        background: #fff3cc;
      }
      &:after{
        bottom: 0;
        background: #ffffff;
      }
      .tab-list{
        display: block;
        width: 100%;
        height: 100%;
        font-size: 0;
        line-height: 0;
        position: relative;
        z-index: 11;
        margin: 0 -40px;
        padding: 0 40px;
        transform: skewX(10deg);
        &.active {
          transform: skewX(-10deg);
          .tab-item .text {
            transform: skewX(10deg);
          }
          .tab-item.left {
            border-bottom-right-radius: $borderRadius;
            border-top-right-radius: 0;
            background: #fff3cc;
            .text {
              color: rgba(0,0,0,0.5);
              font-weight: normal;
            }
          }
          .tab-item.right {
            border-top-left-radius: $borderRadius;
            background: #fff;
            border-bottom-left-radius: 0;
            .text {
              color: #333;
              font-weight: bold;
            }
          }
        }
      }
      .tab-item{
        width: 50%;
        height: 88px;
        display: inline-block;
        vertical-align: top;
        .text {
          display: block;
          width: 100%;
          height: 100%;
          transform: skewX(-10deg);
          line-height: 88px;
          font-size: 30px;
          text-align: center;
          user-select: none;
        }
        &.left{
          background: #fff;
          color: #333;
          font-weight: 700;
          border-top-right-radius: $borderRadius;
        }
        &.right {
          background: #fff3cc;
          border-bottom-left-radius: $borderRadius;
        }
        &.right .text {
          color: rgba(0,0,0,0.5);
        }
      }
    }

END

有什么問題或者疑問歡迎提出 在線解答 哈哈哈哈.