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

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

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

在这篇文章中，我将向你展示如何使用一些简单的 CSS 代码创建两种类型的彩带提示，你无需费心调整css的诸多标识。

<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 创建旋转功能区

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

要了解如何创建这样的功能区，让我们看一个分步说明：

旋转色带的分步说明

首先，我们首先将元素放在屏幕的左上角。插图中的红色边框是屏幕的边界（或你要放置功能区的元素）。

.ribbon {
  position: fixed;
  inset: 0 auto auto 0;
  background: #08769b;
}
复制代码

到目前为止没有什么复杂的。如果您不熟悉该inset属性，它只不过是top、right、bottom和的简写left。

接下来，我们使用 向左平移translate(-29.3%)。 我们使用旋转我们的元素rotate(-45deg)，代码变成这样：

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

你可能想知道29.3%是怎么的得出来的？嗯，它等于100% * (1 - cos(45deg))。

你还可以注意到transform-origin: top left. 在第三步中，我必须从左上角旋转元素。

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

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

100%是一个需要非常大的随机值。999px例如，它可以是100vmax任何值，以确保我们保留阴影的左右部分。

现在我们将在第六步中看到最终结果。我们仍然有一些溢出的阴影，但没有人能看到它们，因为我们将元素放置在屏幕的角落。

如果你要将功能区放在另一个元素中，请不要忘记overflow: 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 个声明，我们就有了旋转的功能区。你会注意到我们的代码是通用的，不依赖于文本内容。无论功能区的内容是什么，它都将始终正确放置。你甚至可以拥有多行文本。

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

.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;
  
}
复制代码

我将考虑一个变量来控制从顶部的偏移，这意味着我们可以通过调整该变量轻松控制功能区的位置。由于我们使用的是position: absolute，我们不应该忘记添加position: relative到功能区的父元素。

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

现在我将介绍另一个控制折叠部分的变量。我将使用这个变量来定义一个插入阴影box-shadow: 0 calc(-1*var(--f)) 0 #0005。

正如你在上图中看到的，这个阴影将在底部添加一个半透明的黑色叠加层，其高度等于变量--f。我还将增加底部填充以包含该阴影padding: 0 10px var(--f)。

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

到目前为止的代码如下所示：

.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-path剪切我们的元素。我还将添加另一个变量--r来控制功能区的箭头形状。

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

padding: 0 10px var(--f) calc(10px + var(--r));
复制代码

• 顶部填充等于0。
• 右填充等于10px（一个随机值）
• 底部填充定义为--f
• 左侧填充等于10px（与右侧相同）加上新变量定义的值--r

现在让我们添加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) */
)
复制代码

如果你不熟悉，请不要担心clip-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 为你的网站创建漂亮的功能区了。

感谢你的阅读！