css3 用 background 实现斜切效果 linear-gradient 使用、clip-path 使用；

原创已于 2025-08-11 16:42:35 修改 · 630 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#css3 #css #html5

于 2024-05-28 17:04:14 首次发布

css3 用 background 实现斜切效果 linear-gradient 使用

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            float: left;
            height: 30px;
            width: 200px;
        }

        .div-1 {
            background: linear-gradient(-45deg, transparent 30px, red 0);
        }

        .div-2 {
            background: linear-gradient(135deg, transparent 30px, green 0, green 140px, transparent 0);
        }

        .div-3 {
            background: linear-gradient(45deg, transparent 30px, green 0);
        }
    </style>
</head>

<body>
    <div class="div-1"></div>
    <div class="div-2"></div>
    <div class="div-3"></div>
</body>

</html>

css3 用 background 实现斜切效果 clip-path 使用（多边形）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        float: left;
        height: 30px;
        width: 200px;
      }

      .div-1 {
        background: red;
        clip-path: polygon(0% 0%, 100% 0%, 80% 100%, 0% 100%);
      }

      .div-2 {
        background: green;
        clip-path: polygon(20% 0%, 100% 0%, 80% 100%, 0% 100%);
      }

      .div-3 {
        background: green;
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 20% 100%);
      }
    </style>
  </head>
  <body>
    <div class="div-1"></div>
    <div class="div-2"></div>
    <div class="div-3"></div>
  </body>
</html>