Question

我正在尝试绘制一个具有渐变的左侧箭头。这是我正在使用的代码，但我不明白为什么它不起作用。

  .left-arrow{
  position: relative;
  &:after{
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0; 
    position: absolute;
    pointer-events: none;
    border-color: rgba(51, 51, 51, 0);
    border-right-color: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(115,9,9,1)), color-stop(100%, rgba(236,0,0,1)));
    border-right-color: -webkit-linear-gradient(top, rgba(115,9,9,1) 0%, rgba(236,0,0,1) 100%);
    border-right-color: linear-gradient(to bottom, rgba(115,9,9,1) 0%, rgba(236,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#730909', endColorstr='#ec0000', GradientType=0 );
    border-width: 50px 20px 50px 0;
    margin-top: -50px;
  }
}

这是一个例子。我只想在左边的箭头上添加渐变。 http://jsfiddle.net/6zWB3/2/

Answer 1

有几种技术可以为您提供此结果。在未来，可能最好的一个是削波。你也可以去边界图像，但是现在对渐变图像的支持也很弱。

同时，您可以通过变换在所有现代浏览器中使用它，并手动调整结果

CSS

.left-arrow:after {
  left: -18px;
  top: 40px;
  content: " ";
  height: 36px;
  width: 65px;
  position: absolute;
  pointer-events: none;
  background: linear-gradient(-32deg, #ec0000 0%, #730909 100%);
  -webkit-transform: rotate(74deg) skewX(56deg);
  -webkit-transform-origin: left bottom;
  transform: rotate(74deg) skewX(56deg);
  transform-origin: left bottom;
}

demo

Answer 2

据我所知，您不能直接将渐变应用于边框...较新版本的webkit支持渐变作为边框图像（http://css-tricks.com/examples/GradientBorder/），但您可能难以尝试获取该技术使用像这样的CSS形状。

你也许可以尝试使用CSS Masking将渐变层叠在箭头形状的顶部，尽管我对这些技术的经验太有限，无法确认这是否有效。（http://www.html5rocks.com/en/tutorials/masking/adobe/）

Answer 3

如果您尝试：

SELECTOR {
    border-left: 9px solid #ff00ff;
    border-right: 9px solid transparent;
    border-bottom: 9px solid transparent;
}

这会为你产生一个漂亮的粉红色箭头。

带有渐变的CSS箭头

3 个答案:

demo