CSS 丝带形状效果

news2025/1/21 8:54:59

CSS 丝带形状效果如图：

在这里插入图片描述

通过CSS创建折叠丝带形状

这里代码应该比较清晰易懂，clip-path 的值应该也容易理解。要注意的是，我们使用了 color-mix()
函数，这个属性允许创建主颜色的深色版本。现在如果我们将元素旋转相反的方向，就会得到旋转的 CSS 丝带形状。

完整代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS 丝带形状</title>
  <style>
    @property --a {
      syntax: "<angle>";
      initial-value: 0deg;
      inherits: true;
    }

    h1 {
      --r: 30px;
      --a: 15deg;
      --c: #384cff;
      line-height: 1.6;
      padding-inline: .5lh;
      color: #fff;
      background:
        linear-gradient(calc(90deg + var(--a)),
          #0000 calc(1lh*sin(var(--a)) - 1px),
          var(--c) calc(1lh*sin(var(--a))) calc(100% - 1lh*sin(var(--a))),
          #0000 calc(100% - 1lh*sin(var(--a)) + 1px));
      position: relative;
      rotate: calc(-1*var(--a));
      transform-style: preserve-3d;
      transition: --a .5s;
      cursor: pointer;
      white-space: nowrap;
    }

    h1.alt {
      --c: #beb100;
      rotate: var(--a);
      background:
        linear-gradient(calc(90deg - var(--a)),
          #0000 calc(1lh*sin(var(--a)) - 1px),
          var(--c) calc(1lh*sin(var(--a))) calc(100% - 1lh*sin(var(--a))),
          #0000 calc(100% - 1lh*sin(var(--a)) + 1px));
    }

    h1:before,
    h1:after {
      content: "";
      position: absolute;
      transform: translate3d(0, 0, -1px);
      rotate: var(--a);
      height: calc(1lh/cos(var(--a)));
      width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a)));
      background: color-mix(in srgb, var(--c), #000 40%);
      pointer-events: none;
    }

    h1.alt:before,
    h1.alt:after {
      rotate: calc(-1*var(--a));
    }

    h1:before {
      right: 0;
      top: 0;
      transform-origin: top right;
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--r) 50%);
    }

    h1.alt:before {
      bottom: 0;
      top: auto;
      transform-origin: bottom right;
    }

    h1:after {
      left: 0;
      bottom: 0;
      transform-origin: bottom left;
      clip-path: polygon(0 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, 0 100%);
    }

    h1.alt:after {
      top: 0;
      bottom: auto;
      transform-origin: top left;
    }

    h1:hover {
      --a: 0deg;
    }

    @supports not (height:1lh) {
      h1 {
        padding-inline: .8em;
        background:
          linear-gradient(calc(90deg + var(--a)),
            #0000 calc(1.6em*sin(var(--a)) - 1px),
            var(--c) calc(1.6em*sin(var(--a))) calc(100% - 1.6em*sin(var(--a))),
            #0000 calc(100% - 1.6em*sin(var(--a)) + 1px));
      }

      h1.alt {
        background:
          linear-gradient(calc(90deg - var(--a)),
            #0000 calc(1.6em*sin(var(--a)) - 1px),
            var(--c) calc(1.6em*sin(var(--a))) calc(100% - 1.6em*sin(var(--a))),
            #0000 calc(100% - 1.6em*sin(var(--a)) + 1px));
      }

      h1:before,
      h1:after {
        height: calc(1.6em/cos(var(--a)));
        width: calc(100%*cos(var(--a)) - 1.6em*sin(var(--a)));
      }
    }


    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-content: center;
      grid-auto-flow: column;
      gap: 50px;
    }

    h1 {
      font-family: sans-serif;
      text-transform: uppercase;
      font-size: 2.5rem;
    }
  </style>
</head>

<body>
  <h1>I am a DHlsp</h1>
  <h1 class="alt">I am a gridAuth</h1>
</body>

</html>