• 记录--纯CSS实现骚气红丝带

    这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

    在本文中，我们将探讨如何使用 CSS 以最少的代码创造出精美的 CSS 丝带形状,并最终实现下面这个效果：

    下面我们使用html和css来实现这个效果。我们使用内容自适应方式布局，不用担心里面的文字长度。本文介绍两种丝带：左侧的丝带称为“折叠丝带”，右侧的丝带称为“旋转丝带”。

    通过CSS创建折叠丝带形状

    首先要实现折叠 CSS 丝带，先定义形状的变量。

    1. .ribbon {
    2.   --r: 20px; /* 控制丝带的切割效果 */
    3.   --s: 20px; /* 折叠部分的尺寸 */
    4.   --c: #d81a14; /* 颜色控制 */
    5. }

    --r和--s这两个变量控制形状，--c控制颜色。

    如果要在CSS中实现多边形，我们可以使用css的 clip-path 属性。我们提前在图形上添加一些填充内容避免文本被切割，然后使用clip-path：

    1. .ribbon {
    2.   --r: 20px; /* 控制丝带的切割效果 */
    3.   --s: 20px; /* 折叠部分的尺寸 */
    4.   --c: #d81a14; /* 颜色控制 */
    5.  
    6.   line-height: 1.6; /* 控制高度 */
    7.   padding-inline: 1.2lh calc(var(--r) + .2lh);
    8.   background: var(--c);
    9.   clip-path: polygon(1lh 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, 100% 100%, 0 100%, 0 100%);
    10. }

    使用 CSS lh 单位

    很多同学可能不知道 lh 单位是什么，它是与 line-height 值相对应的新单位。由于这里使用了一行文本，所以设置 line-height 来控制元素的高度，因此 1lh 就等于元素的高度。所以在 clip-path 中，我们使用这个高度来切割等腰三角形的形状。如下图：

    接着我们需要创建折叠部分，需要使用 clip-path 更新上面的多边形。 clip-path 可以切割元素边界的外部区域，包括盒子阴影、轮廓、伪元素等。

    在下面示例中，利用 box-shadow 配合clip-path 来实现切割。通过更新 Xi 和 Yi 来切割多边形的四个新点，其中三个点位于元素的外部区域。因为我们要切割的部分在外部，但是它是不可见的，这里我们添加了大的 box-shadow 让元素变得可见。代码如下：

    1. .ribbon {
    2.   --r: 20px; /* 控制丝带的切割效果 */
    3.   --s: 20px; /* 折叠部分的尺寸 */
    4.   --c: #d81a14; /* 颜色控制 */
    5.  
    6.   line-height: 1.6; /* 控制高度 */
    7.   padding-inline: 1.2lh calc(var(--r) + .2lh);
    8.   background: var(--c);
    9.   clip-path: polygon(1lh 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, 1lh 100%, 1lh calc(100% + var(--s)), .5lh calc(100% + var(--s) + var(--r)), 0 calc(100% + var(--s)), 0 100%);
    10.   box-shadow: 0 0 0 999px var(--c); /* 较大的阴影扩散半径 */
    11. }

    最后通过引入渐变和另一个框阴影，就实现了阴影效果。到这里我们的 CSS 丝带形状已经成型了。

    现在介绍如何创建第二种形状(绿色丝带)。这里使用相同的方法，用第一个多边形并将其反转一下。

    这样写：

    clip-path: polygon(X1 Y1, X2 Y2, ..., Xn Yn)

    要获得相反的形状，我们将所有 Xi 更改为 100% - Xi！在查看代码之前，大家尝试单独使用第一个形状的多边形来实现这一点。

    在上面的动画中，当鼠标悬停在形状上时，可以看到漂亮的展开收起动画。为了实现这一点，需要通过偏移一些点来更新悬停时的多边形。这里不需要重新编写整个多边形，可以重新定义一个 CSS 变量来控制偏移。

    如果大家关注动画部分，就会注意到有三个点向左移动，同时有三个点向下和向左移动。

    修改 Xi 的点向左移动，修改 Yi 的点向下和向左移动来实现这一点。然后再修改 d 以控制这一运动：

    1. .ribbon {
    2.   --d: 0px; /* 这将控制偏移量 */
    3.   clip-path: polygon(calc(1lh + var(--d)) 0, 100% 0, calc(100% - var(--r)) 50%, 100% 100%, calc(1lh + var(--d)) 100%, calc(1lh + var(--d)) calc(100% + var(--s) + var(--d)), calc(.5lh + var(--d)) calc(100% + var(--s) + var(--r) + var(--d)), var(--d) calc(100% + var(--s) + var(--d)), var(--d) 100%);
    4. }
    5. .ribbon:hover {
    6.   --d: .2lh;
    7. }

    部分同学第一次看到这种多边形，可能会感到困惑，因为它看起来有些复杂。我们从一个简单的多边形开始，然后逐步添加更多点和计算，最终得到这个复杂的多边形。

    创建旋转的 CSS 丝带形状

    现在让我们处理第二种形状。对于这种形状，我们将使用新的三角函数以及 CSS 变量和 calc()，方法与前一个形状类似。为了理解这个形状背后的逻辑，让我们旋转它并确保文本保持在一条直线上。

    下面添加了一些透明度以查看主要元素背后的部分，然后使用伪元素来创建这些部分。这里添加了蓝色轮廓来说明元素的区域。该形状将由两个变量控制：

    1. .ribbon {
    2.   --r: 30px;  /* 控制丝带的切割效果 */
    3.   --a: 15deg; /* 控制旋转角度 */
    4. }

    其中 r 的作用与前一个形状相同。a 将控制主要元素的旋转。

    下面我们从主要元素开始说。从图中我们可以看到，我们需要从每一面切割它，但是这次不能使用 clip-path，我们将使用渐变颜色，其中需要切割的部分需要使用透明的颜色：

    1. .ribbon {
    2.   --r: 30px;  /* 控制丝带的切割效果 */
    3.   --a: 15deg; /* 控制旋转角度 */
    4.  
    5.   background:
    6.     linear-gradient(calc(90deg + var(--a)),
    7.       #0000 calc(1lh*sin(var(--a))),
    8.       var(--c) 0 calc(100% - 1lh*sin(var(--a))),
    9.       #0000 0
    10.     );
    11. }
    效果如图：

    这里的高度等于 1lh/cos(a)。宽度等于 (100% - x)*cos(a)，其中 100% 是主要元素的宽度，x 是我们带有透明度的那一小部分，它等于 1lh*tan(a)。

    两个伪元素具有相同的尺寸，代码如下：

    1. .ribbon:before,
    2. .ribbon:after {
    3.   content: "";
    4.   position: absolute;
    5.   height: calc(1lh/cos(var(--a)));
    6.   width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a)));
    7. }

    在确定尺寸后，我们需要正确定位每个伪元素，并对其进行旋转和切割：

    1. .ribbon:before,
    2. .ribbon:after {
    3.   content: "";
    4.   position: absolute;
    5.   transform: translate3d(0,0,-1px);
    6.   rotate: var(--a);
    7.   height: calc(1lh/cos(var(--a)));
    8.   width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a)));
    9.   background: color-mix
    10.  
    11. (in srgb,var(--c),#000 40%);
    12. }
    13. h1:before {
    14.   right: 0;
    15.   top: 0;
    16.   transform-origin: top right;
    17.   clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--r) 50%);
    18. }
    19. h1:after {
    20.   left: 0;
    21.   bottom: 0;
    22.   transform-origin: bottom left;
    23.   clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%);
    24. }

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

    完整代码

    1. <h1>I am a ribbon</h1>
    2. <h1 class="alt">I am a ribbon</h1>
    

    1. @property --a {
    2.   syntax: "";
    3.   initial-value: 0deg;
    4.   inherits: true;
    5. }
    6.  
    7. h1 {
    8.   --r: 30px;  /* control the cutout of the ribbon */
    9.   --a: 15deg; /* control the rotation (only positive values) */
    10.   --c: #d81a14;
    11.   
    12.   line-height: 1.6; /* this will control the height */
    13.   padding-inline: .5lh; /* OR calc(tan(var(--a))*1.5lh) */
    14.   color: #fff;
    15.   background:
    16.     linear-gradient(calc(90deg + var(--a)),
    17.       #0000 calc(1lh*sin(var(--a)) - 1px),
    18.       var(--c) calc(1lh*sin(var(--a))) calc(100% - 1lh*sin(var(--a))),
    19.       #0000 calc(100% - 1lh*sin(var(--a)) + 1px)
    20.     );
    21.   position: relative;
    22.   rotate: calc(-1*var(--a));
    23.   transform-style: preserve-3d;
    24.   transition: --a .5s;
    25.   cursor: pointer;
    26.   white-space: nowrap;
    27. }
    28. h1.alt {
    29.   --c: #8FBE00;
    30.   rotate: var(--a);
    31.   background:
    32.     linear-gradient(calc(90deg - var(--a)),
    33.       #0000 calc(1lh*sin(var(--a)) - 1px),
    34.       var(--c) calc(1lh*sin(var(--a))) calc(100% - 1lh*sin(var(--a))),
    35.       #0000 calc(100% - 1lh*sin(var(--a)) + 1px)
    36.     );
    37. }
    38. h1:before,
    39. h1:after{
    40.   content: "";
    41.   position: absolute;
    42.   transform: translate3d(0,0,-1px);
    43.   rotate: var(--a);
    44.   height: calc(1lh/cos(var(--a)));
    45.   width: calc(100%*cos(var(--a)) - 1lh*sin(var(--a))) ;
    46.   background: color-mix(in srgb,var(--c),#000 40%);
    47.   pointer-events: none;
    48. }
    49. h1.alt:before,
    50. h1.alt:after {
    51.   rotate: calc(-1*var(--a));
    52. }
    53. h1:before {
    54.   right: 0;
    55.   top: 0;
    56.   transform-origin: top right;
    57.   clip-path: polygon(0 0,100% 0,100% 100%,0 100%,var(--r) 50%);
    58. }
    59. h1.alt:before {
    60.   bottom: 0;
    61.   top: auto;
    62.   transform-origin: bottom right;
    63. }
    64. h1:after {
    65.   left: 0;
    66.   bottom: 0;
    67.   transform-origin: bottom left;
    68.   clip-path: polygon(0 0,100% 0,calc(100% - var(--r)) 50%,100% 100%,0 100%);
    69. }
    70. h1.alt:after {
    71.   top: 0;
    72.   bottom: auto;
    73.   transform-origin: top left;
    74. }
    75.  
    76. h1:hover {
    77.   --a: 0deg;
    78. }
    79.  
    80. /* we fallback to something else if lh is not supported
    81.    1lh = 1.6em (the line-height value)
    82. */
    83. @supports not (height:1lh) {
    84.   h1 {
    85.     padding-inline: .8em; 
    86.     background:
    87.       linear-gradient(calc(90deg + var(--a)),
    88.         #0000 calc(1.6em*sin(var(--a)) - 1px),
    89.         var(--c) calc(1.6em*sin(var(--a))) calc(100% - 1.6em*sin(var(--a))),
    90.         #0000 calc(100% - 1.6em*sin(var(--a)) + 1px)
    91.       );
    92.   }
    93.   h1.alt {
    94.     background:
    95.       linear-gradient(calc(90deg - var(--a)),
    96.         #0000 calc(1.6em*sin(var(--a)) - 1px),
    97.         var(--c) calc(1.6em*sin(var(--a))) calc(100% - 1.6em*sin(var(--a))),
    98.         #0000 calc(100% - 1.6em*sin(var(--a)) + 1px)
    99.       );
    100.   }
    101.   h1:before,
    102.   h1:after{
    103.     height: calc(1.6em/cos(var(--a)));
    104.     width: calc(100%*cos(var(--a)) - 1.6em*sin(var(--a))) ;
    105.   }
    106. }
    107.  
    108.  
    109. body {
    110.   margin: 0;
    111.   min-height: 100vh;
    112.   display: grid;
    113.   place-content: center;
    114.   grid-auto-flow: column;
    115.   gap: 50px;
    116. }
    117.  
    118. h1 {
    119.   font-family: sans-serif;
    120.   text-transform: uppercase;
    121.   font-size: 2.5rem;
    122. }

    本文转载于:

    https://juejin.cn/post/7288178532861345832

    如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

     

  • 相关阅读:
    IDEA Out of memory 问题
    4-SpringBoot架构设计与实现原理-SpringBoot自定义starter
    python 基于PHP+MySQL的驾校信息管理系统
    Spring框架系列(9) - Spring AOP实现原理详解之AOP切面的实现
    账务处理程序、记账凭证账务处理程序、汇总记账凭证账务处理程序、科目汇总表账务处理程序、会计信息化概述、信息化环境下会计账务处理的基本要求（此章出1道小题）
    四元数插值
    day60
    数据库的三大范式(重要)
    Redis学习记录------Redis6的事务操作（九）
    数字人直播软件多少钱，数字人直播系统多少钱，真正赚钱的是？
  • 原文地址：https://blog.csdn.net/qq_40716795/article/details/133793755