带渐变的 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