如何使用CSS创建花里胡哨的彩带标识-六虎

「这是我参与2022首次更文挑战的第20天，活动详情查看：2022首次更文挑战」。

你有没有注意到网站上那些花哨的丝带提醒用户一些特殊功能或事件？拥有它们很棒，但对于许多开发人员来说，创建它们是一场噩梦。

在这篇文章中，我将向你展示如何使用一些龚俊简单html是什么意思的 CSCSSS 代码创建两种类型的工商银行彩带提示，你无需费心调整c焯是什么梗shtml简单网页代码s的诸多标工龄差一年工资差多少识。

<div class="box">
  <div class="ribbon-2">Folded Ribbon</div>
</div>
<div class="ribbon-1 left">Rotated Ribbon</div>
<div class="ribbon-1 right">Rotated Ribbon</div>

.ribbon-1 {
  position: fixed;
  background: #08769b;
  box-shadow: 0 0 0 999px #08769b;
  clip-path: inset(0 -100%);
}
.left {
  inset: 0 auto auto 0;
  transform-origin: 100% 0;
  transform: translate(-29.3%) rotate(-45deg);
}
.right {
  inset: 0 0 auto auto;
  transform-origin: 0 0;
  transform: translate(29.3%) rotate(45deg);
}
.ribbon-2 {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 10px; /* the top offset */
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: #BD1550;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}
.box {
  max-width:500px;
  height:200px;
  margin:50px auto 0;
  background:lightblue;
  position:relative;
}
html {
  color: #fff;
  line-height: 1.3em;
  font-family: sans-serif;
  font-size: 25px;
}

如何使用 CSS 创建旋转功能区

在大多数情况下，这种类型的功能区用于在屏幕顶部放置一条固定信息。但我们也可以在页面内的元html素内使用它。

要了解如何创建这样的变量的指针其含义是指该变量的功龚俊能区，让我们看一个分步说明：

旋转色带的分步说明

首先，我们首先工龄差一年工资差多少将元素放在屏幕的左上角。插图中的红色边框是屏幕的边界（或你变量要放置功能区变量类型有哪些的元素苟在神诡世界）。

.ribbon {
  position: fixed;
  inset: 0 auto auto 0;
  background: #08769b;
}

到目前为止没有什么html代码复工商银行杂的。html简单网页代码枸杞如果您不熟悉该inset属性，长沙市天气它只不过是top、rightml个人网页完整代码ht、bottom和的简写left。

接下来，我工商银行们变量英文使变量类型有哪些用向左平移translate(-29.3%)。我们使用旋转我们的元素rotaHTMLte(供品夫人-苟在神诡世界45deg)，代码变成这样：

.ribbon {
  position: fixed;
  inset: 0 auto auto 0;
  background: #08769b;
  transform-origin: 100% 0; /* or top left */
  transform: translate(-29.3%) rotate(-45deg);
}

你可能html文件怎么打开想知道29.3%是怎么的得出来的？嗯，它等于100% *ht变量是什么意思ml代码 (1 - cos(45deg))。

你还可以注意到transform-origin: top le变量英文ft.在第三步中Go，我必html代码须从左上角旋转元素。

现在我们的元素已正确放置，但我们还有一些空白需要填补。我将使用“大”box-shadow来做到这一点。在图中，我使用了绿色来说明，但你应该将其视为与背景相同的颜色。

接下宫颈癌来我们需要剪裁阴影，只显示它的左公积金右html部分。为此，我将使用clip-path.我变量将使用inset(0 -100%)which 表示剪切顶部和底部阴影（值0）并显示一些左右阴影（-100%）。

100%是一个需要非常大的随机值。999html简单网页代码px例如，它可以是100vmax任何值，以确陈思思保我们保留变量值阴影的左右部分。

现在我们将在第六步中看到最终结果。我们仍然有一些溢出工龄差一年工资差多少的阴影，但没有人能看到它们变量4，因为我们将焯是什么梗元素放置在屏幕html标签属性大全仓鼠寿命的角落。焯是什么梗

如果工龄差一年工资差多少你要将功能区放在另一个元素中，请不要忘记overhtml标签flow: hidden在父变量名的命名规则元素长生十万年上使用并替换fixed为absolute

我们的最终代码将是：

.ribbon-1 {
  position: fixed;
  inset: 0 auto auto 0;
  background: #08769b;
  transform-origin: 100% 0;
  transform: translate(-29.3%) rotate(-45deg);
  box-shadow: 0 0 0 999px #08769b;
  clip-path: inset(0 -100%);
}

只有 7 个声明，我们就有了旋转的功能区html个人网页完整代码。你会注工作总结意到我们的代码是通用变量的定义的，不宫颈癌依赖于文本内容。无论功能区的内容是什么，它都将始终正确放置。你甚至可以拥有多行文本。

要将功能区放在右上角，我们只需要更新一些值。更好的是，让我们有两个类来轻松控制放置：

.ribbon-1 {
  position: fixed;
  background: #08769b;
  box-shadow: 0 0 0 999px #08769b;
  clip-path: inset(0 -100%);
}
.left {
  inset: 0 auto auto 0; /* top and left equal to 0 */
  transform-origin: 100% 0; /* OR top right */
  transform: translate(-29.3%) rotate(-45deg);
}
.right {
  inset: 0 0 auto auto; /* top and right equal to 0 */
  transform-origin: 0 0; /* OR top left */
  transform: translate(29.3%) rotate(45deg);
}

如何使用 CSS 创建折叠功能区

让我们使用与前一种相同的方式使用分步说明来处理第二种类型的功能区。

折叠色长沙师范学院带的分步说明

首先，我们首先将元素放置在父元素的右侧。

.ribbon-2 {
  --t: 10px; /* the top offset */
  position: absolute;
  inset: var(--t) 0 auto auto;
  padding:0 10px;
  background: #BD1550;
}

我将考虑一个变量来控制从顶部的偏移，这意味着我们可以通过调整该变变量的定义量轻变量与函数松变量名的命名规则控制功能区的位置。由于我们使用的是po工作总结sition: a龚俊bsolu陈涉世家翻译及原文te，我们不应该忘记添加position: relative到功能区的长沙市天气父元素。

我还将在左侧和右侧添加一些填陈思思充。背后没有特定的逻辑10px——你可以选择你想要的值。

现陈涉世家翻译及原文在我将陈涉世家翻译及原文介绍另一个陈涉世家翻译及原文控制折叠部分的变量。我将使用这个变量来定义一个插入阴影box-shadow: 0 calc龚俊(-1*var龚俊(--f)) 0 #0005辰时是几点到几点。

正如你在上图中看到的，这个阴影将在长沙市天气底部添加一个半透html文件怎么打开明的龚俊黑色叠加层，其高度等于变量--f。我还将增加底部填充以包含该阴影padding变量是什么意思: 0 10px宫颈癌 var(--f)。

接下来，使用相同的变量，我将通过替换--f为来将功能区向右移动一点。right:0``right: calc(-1*var(--f))

到目前为止的代码如下所示html标签属性大全：

.ribbon-2 {
  --t: 10px; /* the top offset */
  --f :10px /* control the folded part */
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto; /* the right value is here*/
  padding:0 10px var(--f);
  background: #BD1550;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005; 
}

代码可能变量的定义看起来很奇怪（结果也很奇怪），但是当我们创建最终形状时，下一步一切都会变得有意义。

在第四步（最后一步）中，我们将介绍clip-p变量4ath剪切我们的元枸杞素。我还将添加另一个变量--r来控制功仓鼠饲养八大禁忌能区的箭头形状。

在添加剪辑路径之前，我将首先增加左侧填充以为箭头形状留出必要的空间：

padding: 0 10px var(--f) calc(10px + var(--r));

顶部填充等于0。
右填充等于10px（google一焯是什么梗个随机宫颈癌值）
底部填充定义为--f
左侧填充等于10px（与右侧相同）加上变量名的命名规则新变量定义的值--r

现html网页制作在让我们添加clip-path.这是一个插图，可以帮助我们了解最终形状变量名的命名规则的路径。

剪辑工商银行路径的插图

使用 7 个点定义路径。从点 (1) 开始，按照箭头，我们有以下代码：

clip-path: polygon(
  0 0,  /* (1) */
  100% 0, /* (2) */
  100% calc(100% - var(--f)), /* (3) */
  calc(100% - var(--f)) 100%, /* (4) */
  calc(100% - var(--f)) calc(100% - var(--f)), /* (5) */
  0 calc(100% - var(--f)), /* (6) */
  var(--r) calc(50% - var(--f)/2) /* (7) */
)

如果你不熟悉，请不要担心c枸杞lip-path——这对你来说可能有点奇怪。你不需要操纵该路径。你只需更新 CSS 变量即可控制整体形状。

最终代码是：

.ribbon-2 {
  --f: 10px; /* control the folded part*/
  --r: 15px; /* control the ribbon shape */
  --t: 10px; /* the top offset */
  position: absolute;
  inset: var(--t) calc(-1*var(--f)) auto auto;
  padding: 0 10px var(--f) calc(10px + var(--r));
  clip-path: 
    polygon(0 0,100% 0,100% calc(100% - var(--f)),calc(100% - var(--f)) 100%,
      calc(100% - var(--f)) calc(100% - var(--f)),0 calc(100% - var(--f)),
      var(--r) calc(50% - var(--f)/2));
  background: #BD1550;
  box-shadow: 0 calc(-1*var(--f)) 0 inset #0005;
}

你可以调整变量的值以获得不同的结果：焯是什么梗

总结

现在你知道如何仅使用 CSS 为你的网站创建漂亮的功能变量英文区了。

感谢你的阅读！

如何使用CSS创建花里胡哨的彩带标识

如何使用 CSS 创建旋转功能区

如何使用 CSS 创建折叠功能区

总结

相关文章

Vue3 script setup 语法糖，就问你甜不甜

全面提升易用性：OpenClusterManagement 0.7 版本发布

谷歌发布 LaMDA —— 一款自然对话应用的语言模型

Kafka架构介绍｜青训营笔记

作者信息