过年前模仿一个支付宝的支持反对圆角斜切按钮，不规则css直角梯形

​唯一不会让人空手而归的旅程，是内心的旅程

效果

核心

核心css

clip-path:  polygon(4% 0, 100% 0, 100% 100%, 0 100%);

我们在线网站Mask生成无需自己撸，该网站支持不规则css众多类型例如：直角梯形，三角形，菱形，箭头等......过年前模仿一个支付宝的支持反对圆角斜切按钮，不规则css直角梯形

（Mask地址：http://bennettfeely.com/clippy）

案例

基于uni-app

<template>
  <view class="container-footer">
    <view class="container-left">
      支持
    </view>
    <view class="container-right" @click="show = true">
      反对
    </view>
  </view>
</template>
​
<script>
  export default {
    data() {
      return {
      }
    },
    onLoad() {
​
    },
    methods: {
​
    }
  }
</script>
​
<style>
  page{
    background-color: #cfcfcf;
  }
  .container-footer {
    /* width: 100%; */
    padding: 30rpx;
    background-color: #cfcfcf;
    display: flex;
    justify-content: center;
    margin-top: 200rpx;
​
  }
  .container-left{
    border-radius: 200rpx 0rpx 0rpx 200rpx;
    clip-path: polygon(0 0, 100% 0, 96% 100%, 0 100%);
    background-color: #577eff;
    width: 50%;
    text-align: center;
    line-height: 80rpx;
    color: #ffffff;
    font-size: 36rpx;
    font-weight: bold;
    height: 80rpx;
  }
  .container-right{
    border-radius: 0 200rpx 200rpx 0;
    clip-path:  polygon(4% 0, 100% 0, 100% 100%, 0 100%);
    background-color: #e00012;
    text-align: center;
    line-height: 80rpx;
    color: #ffffff;
    width: 50%;
    font-size: 36rpx;
    font-weight: bold;
    height: 80rpx;
  }
</style>
​