css gradient für dreieckigen Pfeil

Question

Bitte schauen Sie sich http://jsfiddle.net/ghAgQ/ Ich brauche die gleiche Steigung für Pfeil, wie es für das Rechteck ist. Irgendwelche Ideen wie das gemacht wird?

Dank

.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

Sie können auf viel einfachere Art und Weise tun dies, nur ein Element mit und ein gedrehtes Pseudoelement (jeden Browser, der auch CSS Steigungen unterstützt CSS transforms und pseudo-elements unterstützt) mit einem abgewinkelten linearen Gradienten . Verwenden Sie auch nicht die alte WebKit-Syntax (siehe this bit about the history of the syntax).

Arbeiten in aktuellen Versionen von Chrome, Opera, Firefox, IE unter Windows.

DEMO

HTML ist nur <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: ''; 
} 

---

bearbeiten Januar 2013

4 Monate später habe ich eine etwas verbesserte Lösung. Diesmal werden die Werte berechnet. Das erste Mal habe ich sie mit Versuch und Irrtum bekommen.

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

Während die Demo oben in Chrome wirklich schön aussieht, wird jeder Browser Support-Informationen fehlt und es nicht in vielen Browsern funktionieren. Ich habe einige Zeit damit verbracht, einen browserübergreifenderen Ansatz zu entwickeln.

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

Derzeit unterstützt IE 10 +, Firefox, Opera, Chroma, Safari