gradiente de css para la flecha en forma de triángulo

Question

Por favor, eche un vistazo a http://jsfiddle.net/ghAgQ/ Necesito el mismo degradado para la flecha, como lo es para el rectángulo. Alguna idea de como es eso? Gracias

.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

Usted puede hacer esto de una manera mucho más sencilla, utilizando sólo un elemento y un elemento seudo girada (cualquier navegador que soporte gradientes CSS también es compatible con CSS transforms y pseudo-elements) con un gradiente lineal angulada . Además, no use la sintaxis WebKit anterior (consulte this bit about the history of the syntax).

Trabajando en las versiones actuales de Chrome, Opera, Firefox, IE en Windows.

DEMO

HTML es sólo <div class='rectangle'></div>

Relevante 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: ''; 
} 

---

edición de enero de 2013

4 meses después, tengo una solución ligeramente mejorada. Esta vez, los valores se computan. La primera vez que los obtuve usando prueba y error.

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

Mientras que la demostración anterior se ve muy bien en Chrome, cualquier información soporte de los navegadores que falta y que no funciona en muchos navegadores. He invertido algo de tiempo para desarrollar un enfoque más entre navegadores.

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

Actualmente es compatible con IE 10+, Firefox, Opera, Chroma, Safari