如何在 div 上创建带背景的多色顶部边框？

Question

是否可以创建如下图所示的二维渐变？

目前，我只能实现以下两个之一，即向右或底部

background: rgba(247,149,29,1);
background: -moz-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(247,149,29,1)), color-stop(16%, rgba(247,149,29,1)), color-stop(17%, rgba(237,28,35,1)), color-stop(33%, rgba(237,28,35,1)), color-stop(34%, rgba(43,56,144,1)), color-stop(56%, rgba(43,56,144,1)), color-stop(56%, rgba(27,118,188,1)), color-stop(57%, rgba(27,118,188,1)), color-stop(73%, rgba(27,118,188,1)), color-stop(73%, rgba(0,167,156,1)), color-stop(100%, rgba(0,167,156,1)));
background: -webkit-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -o-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: -ms-linear-gradient(left, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 16%, rgba(237,28,35,1) 17%, rgba(237,28,35,1) 33%, rgba(43,56,144,1) 34%, rgba(43,56,144,1) 56%, rgba(27,118,188,1) 56%, rgba(27,118,188,1) 57%, rgba(27,118,188,1) 73%, rgba(0,167,156,1) 73%, rgba(0,167,156,1) 100%);
background: linear-gradient(to right, rgba(247,149,29,1) 0%, rgba(247,149,29,1) 20%, rgba(237,28,35,1) 20%, rgba(237,28,35,1) 40%, rgba(43,56,144,1) 40%, rgba(43,56,144,1) 60%, rgba(27,118,188,1) 60%, rgba(27,118,188,1) 80%, rgba(0,167,156,1) 80%, rgba(0,167,156,1) 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7951d', endColorstr='#00a79c', GradientType=1 );

我想要右下渐变，顶部为多色，底部为黑色。

Answer 1

您可以使用 :after 元素来获取类似于您提供的图像的内容：

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.gradient {
  position: relative;
  height: 80px;
  background: rgba(247, 149, 29, 1);
  background: -moz-linear-gradient(
    left,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 16%,
    rgba(237, 28, 35, 1) 17%,
    rgba(237, 28, 35, 1) 33%,
    rgba(43, 56, 144, 1) 34%,
    rgba(43, 56, 144, 1) 56%,
    rgba(27, 118, 188, 1) 56%,
    rgba(27, 118, 188, 1) 57%,
    rgba(27, 118, 188, 1) 73%,
    rgba(0, 167, 156, 1) 73%,
    rgba(0, 167, 156, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    right top,
    color-stop(0%, rgba(247, 149, 29, 1)),
    color-stop(16%, rgba(247, 149, 29, 1)),
    color-stop(17%, rgba(237, 28, 35, 1)),
    color-stop(33%, rgba(237, 28, 35, 1)),
    color-stop(34%, rgba(43, 56, 144, 1)),
    color-stop(56%, rgba(43, 56, 144, 1)),
    color-stop(56%, rgba(27, 118, 188, 1)),
    color-stop(57%, rgba(27, 118, 188, 1)),
    color-stop(73%, rgba(27, 118, 188, 1)),
    color-stop(73%, rgba(0, 167, 156, 1)),
    color-stop(100%, rgba(0, 167, 156, 1))
  );
  background: -webkit-linear-gradient(
    left,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 16%,
    rgba(237, 28, 35, 1) 17%,
    rgba(237, 28, 35, 1) 33%,
    rgba(43, 56, 144, 1) 34%,
    rgba(43, 56, 144, 1) 56%,
    rgba(27, 118, 188, 1) 56%,
    rgba(27, 118, 188, 1) 57%,
    rgba(27, 118, 188, 1) 73%,
    rgba(0, 167, 156, 1) 73%,
    rgba(0, 167, 156, 1) 100%
  );
  background: -o-linear-gradient(
    left,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 16%,
    rgba(237, 28, 35, 1) 17%,
    rgba(237, 28, 35, 1) 33%,
    rgba(43, 56, 144, 1) 34%,
    rgba(43, 56, 144, 1) 56%,
    rgba(27, 118, 188, 1) 56%,
    rgba(27, 118, 188, 1) 57%,
    rgba(27, 118, 188, 1) 73%,
    rgba(0, 167, 156, 1) 73%,
    rgba(0, 167, 156, 1) 100%
  );
  background: -ms-linear-gradient(
    left,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 16%,
    rgba(237, 28, 35, 1) 17%,
    rgba(237, 28, 35, 1) 33%,
    rgba(43, 56, 144, 1) 34%,
    rgba(43, 56, 144, 1) 56%,
    rgba(27, 118, 188, 1) 56%,
    rgba(27, 118, 188, 1) 57%,
    rgba(27, 118, 188, 1) 73%,
    rgba(0, 167, 156, 1) 73%,
    rgba(0, 167, 156, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 20%,
    rgba(237, 28, 35, 1) 20%,
    rgba(237, 28, 35, 1) 40%,
    rgba(43, 56, 144, 1) 40%,
    rgba(43, 56, 144, 1) 60%,
    rgba(27, 118, 188, 1) 60%,
    rgba(27, 118, 188, 1) 80%,
    rgba(0, 167, 156, 1) 80%,
    rgba(0, 167, 156, 1) 100%
  );
}

.gradient:after {
  content: '';
  bottom: 0;
  position: absolute;
  height: 80%;
  width: 100%;
  background: #333;
}

<div class="gradient">
</div>

编辑：既然你想显示一些文本，最好使用内部 div 而不是 :after 伪元素：

* {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.gradient {
  position: relative;
  height: 80px;
  background: rgba(247, 149, 29, 1);
  background: -moz-linear-gradient(
    left,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 16%,
    rgba(237, 28, 35, 1) 17%,
    rgba(237, 28, 35, 1) 33%,
    rgba(43, 56, 144, 1) 34%,
    rgba(43, 56, 144, 1) 56%,
    rgba(27, 118, 188, 1) 56%,
    rgba(27, 118, 188, 1) 57%,
    rgba(27, 118, 188, 1) 73%,
    rgba(0, 167, 156, 1) 73%,
    rgba(0, 167, 156, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    right top,
    color-stop(0%, rgba(247, 149, 29, 1)),
    color-stop(16%, rgba(247, 149, 29, 1)),
    color-stop(17%, rgba(237, 28, 35, 1)),
    color-stop(33%, rgba(237, 28, 35, 1)),
    color-stop(34%, rgba(43, 56, 144, 1)),
    color-stop(56%, rgba(43, 56, 144, 1)),
    color-stop(56%, rgba(27, 118, 188, 1)),
    color-stop(57%, rgba(27, 118, 188, 1)),
    color-stop(73%, rgba(27, 118, 188, 1)),
    color-stop(73%, rgba(0, 167, 156, 1)),
    color-stop(100%, rgba(0, 167, 156, 1))
  );
  background: -webkit-linear-gradient(
    left,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 16%,
    rgba(237, 28, 35, 1) 17%,
    rgba(237, 28, 35, 1) 33%,
    rgba(43, 56, 144, 1) 34%,
    rgba(43, 56, 144, 1) 56%,
    rgba(27, 118, 188, 1) 56%,
    rgba(27, 118, 188, 1) 57%,
    rgba(27, 118, 188, 1) 73%,
    rgba(0, 167, 156, 1) 73%,
    rgba(0, 167, 156, 1) 100%
  );
  background: -o-linear-gradient(
    left,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 16%,
    rgba(237, 28, 35, 1) 17%,
    rgba(237, 28, 35, 1) 33%,
    rgba(43, 56, 144, 1) 34%,
    rgba(43, 56, 144, 1) 56%,
    rgba(27, 118, 188, 1) 56%,
    rgba(27, 118, 188, 1) 57%,
    rgba(27, 118, 188, 1) 73%,
    rgba(0, 167, 156, 1) 73%,
    rgba(0, 167, 156, 1) 100%
  );
  background: -ms-linear-gradient(
    left,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 16%,
    rgba(237, 28, 35, 1) 17%,
    rgba(237, 28, 35, 1) 33%,
    rgba(43, 56, 144, 1) 34%,
    rgba(43, 56, 144, 1) 56%,
    rgba(27, 118, 188, 1) 56%,
    rgba(27, 118, 188, 1) 57%,
    rgba(27, 118, 188, 1) 73%,
    rgba(0, 167, 156, 1) 73%,
    rgba(0, 167, 156, 1) 100%
  );
  background: linear-gradient(
    to right,
    rgba(247, 149, 29, 1) 0%,
    rgba(247, 149, 29, 1) 20%,
    rgba(237, 28, 35, 1) 20%,
    rgba(237, 28, 35, 1) 40%,
    rgba(43, 56, 144, 1) 40%,
    rgba(43, 56, 144, 1) 60%,
    rgba(27, 118, 188, 1) 60%,
    rgba(27, 118, 188, 1) 80%,
    rgba(0, 167, 156, 1) 80%,
    rgba(0, 167, 156, 1) 100%
  );
}

.text {
  background: #333;
  color: #fff;
  height: 80%;
  width: 100%;
  position: absolute;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 10px;
}

<div class="gradient">
  <div class="text">Lorem Ipsum</div>
</div>

Answer 2

这里有几个可能的变体：

1- 使用多个背景：

我们可以通过在 div 元素上应用多个背景图像并精确控制它们的大小来绘制此形状。

考虑以下样式：

background-image: linear-gradient(to right, #f7941d 20%, #ed1c24 20%,
                                            #ed1c24 40%, #2b3990 40%,
                                            #2b3990 60%, #1b75bc 60%,
                                            #1b75bc 80%, #00a79d 80%),
                  linear-gradient(#333, #333);

background-size: 100% 8px, 100% 100%;
background-repeat: no-repeat;

我们正在使用 CSS3 linear-gradient() 创建 2 个不同的背景图像，我们已使用 background-size 属性来限制第一张图像的大小。

注意： background-image 属性中图像的顺序很重要。更改顺序不会产生所需的输出。

输出图像：

工作演示：

.box {
  height: 100px;
  background-image: linear-gradient(to right, #f7941d 20%, #ed1c24 20%, #ed1c24 40%, #2b3990 40%, #2b3990 60%, #1b75bc 60%, #1b75bc 80%, #00a79d 80%),
                    linear-gradient(#333, #333);
  background-size: 100% 8px, 100% 100%;
  background-repeat: no-repeat;
  padding: 20px;
}

<div class="box"></div>

2-使用伪元素：

我们可以使用伪元素绘制顶部边框。

使用::before 或::after 伪元素创建一个层并将其放置在具有position: absolute 的父元素之上。
使用 CSS3 linear-gradient 创建所需的背景，并将其应用于上面创建的图层。

工作演示：

.box {
  position: relative;
  background: #333;
  padding: 20px;
  height: 60px;
}

.box::before {
  background: linear-gradient(to right, #f7941d 20%, #ed1c24 20%, #ed1c24 40%, #2b3990 40%, #2b3990 60%, #1b75bc 60%, #1b75bc 80%, #00a79d 80%) no-repeat;
  position: absolute;
  content: '';
  height: 8px;
  width: 100%;
  left: 0;
  top: 0;
}

<div class="box"></div>

如何在 div 上创建带背景的多色顶部边框？

How to create multi color top border with background on a div?

html

css

css-shapes