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

时间：2017-08-23 04:38:19

标签： html css css3 css-shapes

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

What I need

目前，我只能实现以下两种中的一种，即右或底

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 );

  1. enter image description here

  2. enter image description here

    3. 我希望得到一个正确的底部渐变，顶部为mutli颜色，底部为黑色。

2 个答案:

答案 0 :(得分：3)

以下是一些可能的变体：

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属性中的图片顺序非常重要。订单的更改不会产生所需的输出。

输出图片：

Output 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>

答案 1 :(得分：2)

您可以使用: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>

相关问题
最新问题