上传功能 css_如何创建CSS功能区

我们谈论Web设计中的CSS色带 ，就是一条盒子 （称为色带） 包裹另一个盒子 。 这是一种用于装饰文本 （尤其是标题）的相当常用的设计技术。 在W3C的网站上，您可以查看正确使用CSS功能区如何以微妙的方式帮助构建内容 。

因此，在本文中，我们将了解如何创建一个简单CSS功能区 ，您可以使用它来增强网站上的标题 。 由于CSS转换 ，我们可以使用比以前更简单的代码库来创建此设计。

您可以浏览下面的最终演示。

HTML和基本样式

首先，我们创建一个<header> HTML元素，稍后将向其添加功能区设计 。 我们将其放置在我们用.card选择器标记的<section>标记内，该选择器代表功能区将环绕的矩形框 。

<section class=card>
	<header class=ribbon> </header>
</section>

我们还使用CSS设置了基本尺寸和背景色 。

.card {
  background-color: beige;
  height: 300px;
  margin: 40px;
  width: 500px;
}

色带的中间部分

我们将使用称为--p的CSS变量 （允许我们存储和重用CSS值）来存储padding值 。 padding属性的值对功能区的左侧和右侧填充使用var(--p)语法，以便可以轻松扩展它 。 --p变量稍后将被重用多次 ； 这使我们的代码更加灵活。

.ribbon {
  --p: 15px;
  background-color: rgb(170,170,170);
  height: 60px;
  padding: 0 var(--p);
  width: 100%;
}

在下面的屏幕截图中，您可以看到演示现在的样子：

色带居中

我们还需要将功能区居中 。 我们使用相对定位将其按填充尺寸 （由--p变量标记） 向左推 。

.ribbon {
  --p: 15px;
  background-color: rgb(170,170,170);
  height: 60px;
  padding: 0 var(--p);
  position: relative;
  right: var(--p);
  width: 100%;
}

更新的演示：

色带的侧面

现在，我们创建功能区的左侧和右侧 ，它们似乎应该围绕卡的边缘弯曲。 为此，我们同时使用.ribbon的:before和:after伪元素。

这两个伪元素都继承了.ribbon的背景色，我们使用filter: brightness(.5) .ribbon filter: brightness(.5)规则将其颜色稍微加深。 它们也绝对位于其（相对定位的）父对象中。

它们的宽度必须与padding大小相同 ，然后使用left: 0和right: 0样式规则将它们放置在功能区的左右两端 。

.ribbon:before,
.ribbon:after {
  background-color: inherit;
  content:'';
  display: block;
  filter: brightness(.5);
  height: 100%;
  position: absolute;
  width: var(--p);
}
.ribbon:before {
  left: 0;
}
.ribbon:after {
  right: 0;
}

现在，我们刚刚添加了边的功能区如下所示：

倾斜两侧

为了使色带的侧面看起来弯曲 ，我们需要将侧面倾斜45° 。 transform: skewy() CSS规则使元素垂直倾斜 。

.ribbon:before {
  left: 0;
  transform:skewy(45deg);
}
.ribbon:after {
  right: 0;
  transform:skewy(-45deg);
}

如您所见，转换后边的边缘未对齐 ，因此我们需要将其拉下 。

对齐侧面

为了确定需要向下移动边的适当长度 ，我们转向三角学。 我们需要找到的是x ，因为y是边的宽度（等于.ribbon的填充大小），并且角度θ是45°（倾斜角度）。

然后需要将所得的x 减半 ，因为左侧和右侧也是如此。

如果您使用任何CSS预处理器，请检查其是否具有tan功能，否则请参考切线图或计算器以找出angle的切线值 。 我们很幸运，因为tan 45°是1 ，这意味着在我们的例子中x的值等于y 。

.ribbon:before,
.ribbon:after {
  background-color: inherit;
  content:'';
  display: block;
  filter: brightness(.5);
  height: 100%;
  position: absolute;
  top: calc(var(--p)/2);
  width: var(--p);
}

由于x必须减半，因此我们使用calc() CSS函数执行--p变量的除法。

最后，我们还需要沿z轴对齐侧面 ，因此让我们在侧面添加z-index: -1规则，以便将它们放置在色带的中部之后 。

.ribbon:before,
.ribbon:after {
  background-color: inherit;
  content:'';
  display: block;
  filter: brightness(.5);
  height: 100%;
  position: absolute;
  top: calc(var(--p)/2);
  width: var(--p);
  z-index: -1;
}

现在，我们对齐了边，完成了CSS功能区。

您可以在下面再次查看实时演示，请注意，它还使用了其他样式。

翻译自: https://www.hongkiat.com/blog/translucent-css-ribbon/