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

在本文中,我们将探讨如何使用 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 来实现切割。通过更新 XiYi 来切割多边形的四个新点,其中三个点位于元素的外部区域。因为我们要切割的部分在外部,但是它是不可见的,这里我们添加了大的 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 丝带形状已经成型了。

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

这样写:

  1. 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 --{
  2.   syntax: "<angle>";
  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: --.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. body {
  109.   margin: 0;
  110.   min-height: 100vh;
  111.   display: grid;
  112.   place-content: center;
  113.   grid-auto-flow: column;
  114.   gap: 50px;
  115. }
  116.  
  117. h1 {
  118.   font-family: sans-serif;
  119.   text-transform: uppercase;
  120.   font-size: 2.5rem;
  121. }

本文转载于:

https://juejin.cn/post/7288178532861345832

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

记录--纯CSS实现骚气红丝带的更多相关文章

  1. 摘记 史上最强大的40多个纯CSS绘制的图形(一)

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  2. 史上最强大的40多个纯CSS绘制的图形

    Square(正方形) #square { width: 100px; height: 100px; background: red; } Rectangle(矩形) #rectangle { wid ...

  3. 40多个纯CSS绘制的图形

    本文由码农网 – 陈少华原创,转载请看清文末的转载要求. 今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和 ...

  4. CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  5. 纯css实现京东导航菜单

    纯CSS代码实现导航菜单,推荐在chrome预览! 预览请点击这里:mygithub <!doctype html> <html lang="en"> &l ...

  6. 详解纯css实现瀑布流(multi-column多列及flex布局)

    瀑布流的布局自我感觉还是很吸引人的,最近又看到实现瀑布流这个做法,在这里记录下,特别的,感觉flex布局实现瀑布流还是有点懵的样子,不过现在就可以明白它的原理了 1.multi-column多列布局实 ...

  7. 纯css实现打字效果

    概述 很早以前就在别人的博客上面看到打字动画了,觉得非常炫酷,以为是用js做的,找了半天也没找到js在哪里.今天看<css揭秘>,碰巧看到书上打字动画的实现了,而且是纯css实现的!我参考 ...

  8. 史上最强大的40多个纯CSS绘制的图形[转]

    今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...

  9. 纯CSS画的基本图形

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  10. 纯css实现Magicline Navigation(下划线动画导航菜单)

    看别人网站的时候,看到一种导航菜单的动画,觉得很有意思,就仔细研究起来. 目前见过的动画有三种:水平下划线动画导航.水平背景动画导航.垂直动画导航,他们实现思路都是一样的,都是依赖 css3的同级通用 ...

随机推荐

  1. SP10050 POWTOW - Power Tower City 题解

    题目传送门 前置知识 扩展欧拉定理 解法 本题幂塔是有限层的,这里与 luogu P4139 上帝与集合的正确用法 中的无限层幂塔不同,故需要在到达递归边界 \(n+1\) 时进行特殊处理,对于处理 ...

  2. NC14402 求最大值

    题目链接 题目 题目描述 给出一个序列,你的任务是求每次操作之后序列中 (a[j]-a[i])/(j-i)[1<=i<j<=n]的最大值. 操作次数有Q次,每次操作需要将位子p处的数 ...

  3. NC20951 网络优化

    题目链接 题目 题目描述 <梦三国2>是一款3D MOBA类网游.游戏继承<梦三国>的三国文化背景和基础玩法,并加入许多全新地图和全新竞技玩法.由于人气高,游戏在线人数与日俱增 ...

  4. ARP(Address Resolution Protocol) Packet

    Address Resolution Protocol The Address Resolution Protocol (ARP) is a communication protocol used f ...

  5. Js实用小技巧

    Js实用小技巧 这是一份Js实用小技巧,也可以是一份Js挨打小技巧,下面的一系列操作虽然能够在一定程度上使代码更加简洁,但是在缺少注释的情况下会降低可读性,所以需要谨慎使用这些黑魔法. 位元算 取整 ...

  6. spring boot中配置网页语言国际化

    项目地址:https://gitee.com/indexman/spring_boot_in_action 开发步骤 1.编写国际化配置文件 场景是给登录页面 login.html添加国际化支持. 2 ...

  7. Java中交换2个变量的三种方式

    这一题是我之前找Java工作时的笔试题,比较有代表性,拿出来和大家分享. package com.dylan.practice.interview; /** * 交换2个整形变量的几种方式 * * @ ...

  8. 深入理解Go语言(08):sync.WaitGroup源码分析

    一.sync.WaitGroup简介 1.1 sync.WaitGroup 解决了什么问题 在编程的时候,有时遇到一个大的任务,为了提高计算速度,会用到并发程序,把一个大的任务拆分成几个小的独立的任务 ...

  9. OFDM系统各种调制阶数的QAM误码率(Symbol Error Rate)与 误比特率(Bit Error Rate)仿真结果

    本文是OFDM系统的不同QAM调制阶数的误码率与误比特率仿真,仅考虑在高斯白噪声信道下的情景,着重分析不同信噪比下的误码(符号)率性能曲线,不关心具体的调制与解调方案,仿真结果与理论的误码率曲线进行了 ...

  10. 01-Redis系列之-Redis介绍安装配置

    Redis初识 Redis主要内容 1 redis介绍,特性,安装和配置,典型应用场景 2 单线程架构,5大数据类型操作,通用指令和高级API的使用 3 高级用法(慢查询,管道,shu发布订阅,bit ...