如何用渐变和透明制作这样的斜角箭头？

【问题标题】：How to make a angled arrow like this with gradient and transparent?如何用渐变和透明制作这样的斜角箭头？
【发布时间】：2011-10-14 17:42:47
【问题描述】：

如何用渐变和透明制作这样的斜角箭头？

我在这里做了一个渐变块。需要帮助才能转换成箭头。

http://jsfiddle.net/jitendravyas/aZ65c/2/

我需要一个兼容 ie8 的兼容性

【问题讨论】：

为什么不创建 .png 或 .gif？更“跨浏览器”的东西？
这个箭头是动态的。箭头的宽度每次都不一样。

标签： css

【解决方案1】：

@jitendar;看看这个，我用纯 CSS 做的：

.button {width:70px;
    height:140px;
    overflow:hidden;
}
.button:after {
    content:"";
    width:100px;
    height:100px;
    background: linear-gradient(left top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display:block;
    margin-top:20px;
    margin-left:25px;
}

检查小提琴http://jsfiddle.net/sandeep/aZ65c/7/

【讨论】：

这很聪明！对其进行了一些修改，使其看起来更像 Jitendra 的示例：jsfiddle.net/9TKLn
@Duopixel - 当我增加或减少箭头的大小时。它改变了渐变的阴影
您必须在.button 上使用 css 变换更改大小，否则渐变和定位不合适。