三角形箭头的css渐变

Question

请看看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; 

} 

Answer 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>

相关CSS：

.rectangle { 
    float: left; 
    position: relative; 
    height: 80px; 
    width: 240px; 
    border: solid 1px #ccc; 
    border-right: none; 
    background: #eee linear-gradient(white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6); 
    cursor: pointer; 
} 
.rectangle:after { 
    position: absolute; 
    top: 16px; right: -25px; 
    width: 48px; 
    height: 47px; 
    border-left: solid 1px #ccc; 
    border-top: solid 1px #ccc; 
    transform: rotate(134deg) skewX(-10deg) skewY(-10deg); 
    background: #eee linear-gradient(45deg, white, #f1f1f1 37%, #e1e1e1 57%, #f6f6f6); 
    content: ''; 
} 

---

编辑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: '' 
 
}

<div class='shape'></div>

Answer 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，歌剧，色度，Safari浏览器