带渐变的 CSS 箭头

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

这将为您生成一个漂亮的亮粉色箭头。