css gradient for triangle shaped arrow

Question

Please take a look at http://jsfiddle.net/ghAgQ/ I need the same gradient for arrow, as it is for the rectangle. Any ideas how thats done? Thanks

.rectan         


        

Answer 1

While the demo above looks really nice in Chrome, any browser support information is missing and it does not work in many browsers. I have spend some time to develop a more cross-browser approach.

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

Currently supports IE 10+, Firefox, Opera, Chroma, Safari

Answer 2

You can do this in a much simpler way, using just an element and a rotated pseudo element (any browser that supports CSS gradients also supports CSS transforms and pseudo-elements) with an angled linear gradient. Also, don't use the old WebKit syntax (see this bit about the history of the syntax).

Working in current versions of Chrome, Opera, Firefox, IE on Windows.

DEMO

HTML is just <div class='rectangle'></div>

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

---

Edit January 2013

4 months later, I have a slightly improved solution. This time, the values are computed. The first time I got them using trial and 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>