三角形の矢印の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の、オペラ、クロマ、サファリ