CSS 丝带形状效果

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>