gradiente css per freccia triangolare

Question

Si prega di dare un'occhiata a http://jsfiddle.net/ghAgQ/ Ho bisogno dello stesso gradiente per la freccia, come lo è per il rettangolo. Qualche idea su come va fatto? Grazie

.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

È possibile farlo in un modo molto più semplice, utilizzando solo un elemento e un elemento pseudo ruotato (qualsiasi browser che supporta i gradienti CSS supporta anche CSS transforms e pseudo-elements) con un gradiente lineare ad angolo . Inoltre, non utilizzare la vecchia sintassi WebKit (vedere this bit about the history of the syntax).

Utilizzo nelle versioni correnti di Chrome, Opera, Firefox, IE su Windows.

DEMO

HTML è solo <div class='rectangle'></div>

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

---

Modifica gennaio 2013

4 mesi dopo, ho una soluzione leggermente migliorata. Questa volta, i valori sono calcolati. La prima volta che li ho usati usando tentativi ed errori.

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

Mentre la demo di cui sopra sembra davvero bello in Chrome, tutte le informazioni di supporto del browser non è presente e non funziona in molti browser. Ho trascorso un po 'di tempo a sviluppare un approccio più cross-browser.

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

Attualmente supporta IE 10+, Firefox, Opera, Chroma, Safari