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

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

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

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

通过CSS创建折叠丝带形状

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

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

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

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

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

使用 CSS lh 单位

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

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

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

.ribbon {--r: 20px; /* 控制丝带的切割效果 */--s: 20px; /* 折叠部分的尺寸 */--c: #d81a14; /* 颜色控制 */line-height: 1.6; /* 控制高度 */padding-inline: 1.2lh calc(var(--r) + .2lh);background: var(--c);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%);box-shadow: 0 0 0 999px var(--c); /* 较大的阴影扩散半径 */
}

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

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

这样写:

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

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

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

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

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

.ribbon {--d: 0px; /* 这将控制偏移量 */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%);
}
.ribbon:hover {--d: .2lh;
}

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

创建旋转的 CSS 丝带形状

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

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

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

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

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

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

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

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

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

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

.ribbon:before,
.ribbon: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%);
}
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: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%);
}

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

完整代码

<h1>I am a ribbon</h1>
<h1 class="alt">I am a ribbon</h1>
@property --a {syntax: "<angle>";initial-value: 0deg;inherits: true;
}h1 {--r: 30px;  /* control the cutout of the ribbon */--a: 15deg; /* control the rotation (only positive values) */--c: #d81a14;line-height: 1.6; /* this will control the height */padding-inline: .5lh; /* OR calc(tan(var(--a))*1.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: #8FBE00;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;
}/* we fallback to something else if lh is not supported1lh = 1.6em (the line-height value)
*/
@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;
}

本文转载于:

https://juejin.cn/post/7288178532861345832

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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/157307.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Redis分布式锁最牛逼的实现(Java 版,最牛逼的实现方式)

写在前面的话 分布式锁一般有三种实现方式&#xff1a;1. 数据库乐观锁&#xff1b;2. 基于Redis的分布式锁&#xff1b;3. 基于ZooKeeper的分布式锁。 本篇博客将介绍第二种方式&#xff0c;基于Redis实现分布式锁。 为什么需要分布式锁&#xff1f; 在单机环境下编写多线…

java中的泛型

一 为啥要有泛型 泛型这个概念是在Java1.5提出来的&#xff0c;之前是没有的&#xff0c;那为什么之前没有&#xff0c;现在要提出来这个概念呢&#xff1f;那你就得想啊&#xff1a; 1、要么是之前的技术太垃圾了&#xff0c;得升级换代下 2、要么是技术发展&#xff0c;搞出…

【数据结构】算法的空间复杂度

&#x1f984;个人主页:修修修也 &#x1f38f;所属专栏:数据结构 ⚙️操作环境:Visual Studio 2022 算法空间复杂度的定义 算法的时间复杂度和空间复杂度是度量算法好坏的两个重要量度,在实际写代码的过程中,我们完全可以用空间来换时间,比如说,我们要判断某某年是不是闰年,大…

github创建个人网页登录后404无法显示的问题

1.首先必须要有内容&#xff0c;默认是会找index.html文件&#xff0c;找不到该文件会找readme.md文件&#xff0c;也就是说最简单的方法是&#xff0c;创建了与用户名同名的repository后username.github.io后&#xff0c;添加一个readme.md文件&#xff0c;得在readme里打点字…

【算法-动态规划】最长上升子序列-力扣 300

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

设计模式-相关内容

文章目录 一、设计模式概述二、UML图1.类的表示方法2.类与类之间关系的表示方法(1)关联关系(2)聚合关系(3)组合关系(4)依赖关系(5)继承关系(6)实现关系 三、软件设计原则1.开闭原则2.里氏代换原则3.依赖倒转原则4.接口隔离原则5.合成复用原则6.迪米特法则 一、设计模式概述 创…

驾驶数字未来:汽车业界数字孪生技术的崭新前景

随着数字化时代的到来&#xff0c;汽车行业正经历着前所未有的变革。数字孪生技术&#xff0c;作为一种前沿的数字化工具&#xff0c;正在为汽车行业带来革命性的影响&#xff0c;不仅改变着汽车制造和维护的方式&#xff0c;也为消费者带来了前所未有的体验。让我们一起探讨&a…

[sqoop]hive导入mysql,其中mysql的列存在默认值列

一、思路 直接在hive表中去掉有默认值的了列&#xff0c;在sqoop导入时,指定非默认值列即可&#xff0c; 二、具体 mysql的表 hive的表 create table dwd.dwd_hk_rcp_literature(id string,literature_no string,authors string,article_title string,source_title string…

OLED透明拼接屏:福州鼓山风景区:徜徉于城市壮丽之

福州是中国福建省的省会城市&#xff0c;历史悠久&#xff0c;文化底蕴深厚。 该城市曾是唐宋时期的重要港口城市&#xff0c;也是丝绸之路海上丝绸之路的起点之一。 福州以其独特的地理位置和丰富的历史遗产而闻名于世。 福州拥有众多的历史景点&#xff0c;其中最著名的是…

MySQL为什么用b+树

索引是一种数据结构&#xff0c;用于帮助我们在大量数据中快速定位到我们想要查找的数据。 索引最形象的比喻就是图书的目录了。注意这里的大量&#xff0c;数据量大了索引才显得有意义&#xff0c;如果我想要在[1,2,3,4]中找到4这个数据&#xff0c;直接对全数据检索也很快&am…

动态盘转换为基本盘

问题描述 不小心将磁盘0&#xff08;C和D是基本盘&#xff0c;蓝颜色&#xff09;改成了动态盘&#xff08;C和D是动态盘&#xff0c;橘黄色&#xff09;&#xff1f;如何修改回来呢&#xff1f; 解决方案&#xff1a; 使用DiskGenius将动态磁盘转换为基本磁盘 操作之前一定…

风电光伏混合储能功率小波包分解、平抑前后波动性分析、容量配置、频谱分析、并网功率波动分析(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

【java|golang】多字段排序以及排序规则

奖励最顶尖的 K 名学生 给你两个字符串数组 positive_feedback 和 negative_feedback &#xff0c;分别包含表示正面的和负面的词汇。不会 有单词同时是正面的和负面的。 一开始&#xff0c;每位学生分数为 0 。每个正面的单词会给学生的分数 加 3 分&#xff0c;每个负面的词…

智慧空开让用电更安全、管理更智能——电脑APP远程控制开合闸

安科瑞 崔丽洁 01 什么是低压断路器&#xff1f;低压断路器的定义是&#xff1a;能够接通、承载及分断正常电路条件下的电流&#xff0c;也能在规定的非正常电路条件&#xff08;过载、短路、特别是短路&#xff09;下接通、承载一定时间和分断电流的开关电器。 断路器的分类&…

拼多多商品品牌数据接口,拼多多商品详情数据接口,拼多多优惠券数据接口,拼多多API接口

拼多多商品品牌数据采集方法如下&#xff1a; 手动数据采集。直接在拼多多平台上搜索并手动复制商品数据&#xff0c;适合采集小批量的商品数据&#xff0c;但不适用于大规模数据采集。手动采集需要手动输入搜索词&#xff0c;进行筛选后再复制所需的数据&#xff0c;该方法需…

白银做期货还是做现货?

现货白银和期货白银都是保证金交易品种&#xff0c;都具有一定的资金杠杆&#xff0c;新手投资者在它们之间进行选择的时候&#xff0c;可能会遇到一定的困难&#xff0c;但是只要投资者真正了解过它们的区别&#xff0c;在选择时思路就会更加清晰&#xff0c;能够根据自己的实…

Stable Diffusion XL搭建

本文参考&#xff1a;Stable Diffusion XL1.0正式发布了&#xff0c;赶紧来尝鲜吧-云海天教程 Stable Diffision最新模型SDXL 1.0使用全教程 - 知乎 1、SDXL与SD的区别 &#xff08;1&#xff09;分辨率得到了提升 原先使用SD生成图片&#xff0c;一般都是生成512*512&…

VMWare配置桥接

一、设置网络模式 二、编辑网卡配置 ip配置的子网掩码和默认网关保持和宿主机一致&#xff0c;ip局域网内不冲突。 # cd /etc/sysconfig/network-scriptslsvim ifcfg-ens160 TYPEEthernet PROXY_METHODnone BROWSER_ONLYno BOOTPROTOnone DEFROUTEyes IPV4_FAILURE_FATALno IP…

hive 之select 中文乱码

此处的中文乱码和mysql的库表 编码 latin utf 无关。 直接上案例。 有时候我们需要自定义一列&#xff0c;有时是汉字有时是字母&#xff0c;结果遇到这种情况了。 说实话看到这真是糟心。这谁受得了。 单独select 没有任何问题。 这是怎么回事呢&#xff1f; 经过一番检查&…

C++11新特性(lambda,可变参数模板,包装器,bind)

lambda表达式是什么&#xff1f;包装器又是什么&#xff1f;有什么作用&#xff1f;莫急&#xff0c;此篇文章将详细带你探讨它们的作用。很多同学在学习时害怕这些东西&#xff0c;其实都是方便使用的工具&#xff0c;很多情况下我们学这些新的东西觉得麻烦&#xff0c;累赘&a…