Question

如何将CSS箭头设为渐变而不是纯色？

这是我的CSS“

.breadcrumbDivider .arrow-right {
  width: 0; 
  height: 0; 
  border-top: 25px solid transparent;
  border-bottom: 25px solid transparent;
  border-left: 25px solid gold; 
  position: relative;
  margin-left: 360px;
}

我尝试使用CSS渐变背景图像渐变但是它采用了border参数但不确定如何克服这个问题？

这是我试图使用的渐变......

  background-color: #c9bc9e;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#c9bc9e), to(#a89464));
  background-image: -webkit-linear-gradient(top, #c9bc9e, #a89464);
  background-image: -moz-linear-gradient(top, #c9bc9e, #a89464);
  background-image: -ms-linear-gradient(top, #c9bc9e, #a89464);
  background-image: -o-linear-gradient(top, #c9bc9e, #a89464);
  background-image: linear-gradient(top, #c9bc9e,#a89464);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c9bc9e', endColorStr='#a89464');

Answer 1

我通过“切断”来做到这一点。来自方形div的箭头，而不是生成＆＃39;一个箭头。它甚至有悬停效果：

＆＃13;

.arrow {
  height: 200px;
  width: 300px;
  background: rgb(169, 3, 41);
  background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
  background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
  background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
  background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
  background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
  position: relative;
  overflow: hidden;
  transition: all 0.8s;
}
.arrow:before {
  content: "";
  position: absolute;
  top: 0;
  width: 70%;
  height: calc(100% - 80px);
  border-top: 40px solid white;
  border-bottom: 40px solid white;
  z-index: 10;
}
.arrow:after {
  content: "";
  position: absolute;
  right: 0;
  border-top: 100px solid white;
  border-bottom: 100px solid white;
  border-left: 100px solid transparent;
  z-index: 10;
}
.perc {
  position: absolute;
  top: 0;
  width: 0%;
  height: 100%;
  background: rgb(30, 87, 153);
  background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
  background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
  background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
  background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
  background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
  z-index: 5;
  transition: all 0.8s;
}
.arrow:hover .perc {
  width: 100%;
}

＆＃13;

<div class="arrow">
  <div class="perc"></div>
</div>

＆＃13;

注意

最初是为进度条设计的，但如有必要，可以删除悬停效果。

仅适用于区块彩色背景

所以，如果我剪掉了那些奇特的东西，那么并告诉你它是如何工作的：

将下面的一个悬停在神奇的地方：

＆＃13;
＆＃13;
.arrow { height: 200px; width: 300px; background: rgb(169, 3, 41); background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1))); background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%); background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%); background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%); background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%); filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0); position: relative; overflow: hidden; transition: all 0.8s; } .arrow:before { content: ""; position: absolute; top: 0; width: 100%; height: calc(100% - 80px); border-top: 40px solid white; border-bottom: 40px solid white; z-index: 10; } .arrow:after { content: ""; position: absolute; right: 0px; border-top: 100px solid white; border-bottom: 100px solid white; border-left: 100px solid transparent; z-index: 10; } .arrow:hover:before { border-top: 40px solid tomato; border-bottom: 40px solid tomato; } .arrow:hover:after { border-top: 100px solid yellow; border-bottom: 100px solid blue; }
＆＃13;
<div class="arrow"></div>
＆＃13;
＆＃13;
＆＃13;

渐变CSS箭头

1 个答案: