css实现倾斜按钮（radial-gradient）在开发过程中，会偶尔碰到一些这样的ui样式并用纯css实现倾斜按钮（

css实现倾斜按钮（radial-gradient）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>倾斜按钮</title>

    <style>
      .box {
        width: 500px;
        margin: 50px auto;
      }
      .button {
        width: 300px;
        height: 88px;
        background: #0692ff;
        font-size: 24px;
        color: #fff;
        line-height: 88px;
        text-align: center;
        margin: 0 auto;
        border: none;

        border-radius: 20px 0 20px 0; /* 设置左上角、右下角的圆角 */
        position: relative;
        transform: skew(-20deg); /* 让按钮倾斜 */
      }
      .button::after {
        content: "";
        position: absolute;
        background: radial-gradient(
          circle at 100% 100%,
          /* 设置径向渐变的圆类型-位置为右下角 */ transparent 20px,
          /* 设置径向渐变的起始色 */ #0692ff 21px
            /* 设置径向渐变的终止色，多1px处理径向渐变的圆角锯齿问题 */
        );
        width: 20px;
        height: 20px;
        top: 0;
        right: -19px;
      }
      .button::before {
        content: "";
        position: absolute;
        background: radial-gradient(
          circle at 0 0,
          /* 设置径向渐变的圆类型-位置为左上角 */ transparent 20px,
          /* 设置径向渐变的起始色 */ #0692ff 21px
            /* 设置径向渐变的终止色，多1px处理径向渐变的圆角锯齿问题 */
        );
        width: 20px;
        height: 20px;
        bottom: 0;
        left: -19px;
      }
      .button span {
        display: block; /* 需要设置成块元素，行内元素设置transform无效 */
        transform: skew(20deg); /* 让文字摆正，不被父元素的倾斜影响 */
      }
    </style>
  </head>
  <body>
    <div class="box">
      <button class="button">
        <span>倾斜按钮</span>
      </button>
    </div>
  </body>
</html>