【问题标题】：css gradient for triangle shaped arrow三角形箭头的css渐变
【发布时间】：2016-02-11 20:48:39
【问题描述】：

请看http://jsfiddle.net/ghAgQ/ 我需要相同的渐变箭头，因为它是矩形。有什么想法是怎么做到的？谢谢

.rectangle {
background-color: #EEE;
height: 80px;
width: 240px;
border: 1px solid #CCC;
background: white;
cursor: pointer;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white),             color-stop(37%,#F1F1F1), color-stop(57%,#E1E1E1), color-stop(100%,#F6F6F6));
float: left;
}

.arrow {

border-top: 41px solid transparent;
border-bottom: 41px solid transparent;
border-left: 15px solid #C4C4C4;
float: left;
cursor: pointer;

}

【问题讨论】：

请始终在您的问题中包含相关代码。外部链接很棒，但如果它们不复存在，您的问题应该对其他人仍然有用。

标签： css css-shapes linear-gradients

【解决方案1】：

你可以用一种更简单的方法来做到这一点，只使用一个元素和一个旋转的伪元素（任何支持 CSS 渐变的浏览器也支持 CSS transforms 和 pseudo-elements）和一个有角度的线性渐变。另外，不要使用旧的 WebKit 语法（请参阅this bit about the history of the syntax）。

在 Windows 上使用当前版本的 Chrome、Opera、Firefox、IE。

DEMO

HTML 只是<div class='rectangle'></div>

2013 年 1 月编辑

4 个月后，我有了一个稍微改进的解决方案。这一次，计算值。我第一次通过反复试验得到它们。

new demo

.shape {
    float: left;
    position: relative;
    border: 1px solid #ccc;
    border-right: none;
    width: 240px; height: 80px;
    background: linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6);
    cursor: pointer;
}
.shape:after {
    position: absolute;
    top: 50%; right: 0;
    margin: -24px -20px;
    border-top: solid 1px #ccc;
    border-right: solid 1px #ccc;
    width: 40px /* 80px/2 */; height: 47px/* 80px/sqrt(3) */;
    transform: rotate(30deg) skewY(30deg); /* create a rhombus */
    /* 49.1deg = atan(1.15) = atan(47px/40px) */
    background: 
            linear-gradient(-49.1deg, #f6f6f6, #e1e1e1 43%, #f1f1f1 63%, white);
    content: ''
}

&lt;div class='shape'&gt;&lt;/div&gt;

【讨论】：

很酷但不是完美的解决方案。您可以看到箭头点上的边框不是均匀粗的。
这是一个很好的解决方案，但它目前不适用于最新的 chrome 版本 28.0.1500.95
什么操作系统？它适用于 Windows 7 上的 Chrome（版本 28.0.1500.95 m）。
我已经构建了一个更跨浏览器的解决方案，见下文
@Ana 我们可以根据可用的宽度和高度将宽度和高度设置为百分比来扩展它吗？

【解决方案2】：

虽然上面的演示在 Chrome 中看起来非常不错，但缺少任何浏览器支持信息，并且它在许多浏览器中都不起作用。我花了一些时间来开发一种更跨浏览器的方法。

HERE'S A SOLUTION FOR ALL MODERN BROWSERS WITH A NICE BUILD FUNCTION USING SASS

.triangle {
    /* sample positioning */
    width: 160px;
    height: 160px;
    position: absolute;
    top: 30%;
    left: 45%;

    /*
     * deprecated syntax has better browser support
     * IE8+
     * http://css-tricks.com/almanac/properties/c/clip/
     */
    clip: rect(auto, 180px, auto, 100px);

    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.triangle::after {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 10px;
    right: 10px;

    /**
     * To also support IE 9 we you a background images
     * as fallback, created via compass:
     * @include background-image(linear-gradient(300deg, green, blue));
     */
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjEuMDkxNTA2IiB5MT0iMC44NDE1MDYiIHgyPSItMC4wOTE1MDYiIHkyPSIwLjE1ODQ5NCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwODAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -moz-linear-gradient(150deg, green, blue);
    background-image: -webkit-linear-gradient(150deg, green, blue);
    background-image: linear-gradient(300deg, green, blue);


    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

目前支持 IE 10+、Firefox、Opera、Chroma、Safari

【讨论】：