CSS Gradient for Triangle Shaped Arrow

css gradient for triangle shaped arrow

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>

Make CSS3 triangle with linear gradient

I hope this will help you i have made gradient triangle with only one div with pure css.

http://jsfiddle.net/NDJ3S/15/

UPDATED

Check it now its working :- http://jsfiddle.net/NDJ3S/17/

Gradient effect for triangle shape borders

I have done it drawing shape and avoiding borders. It is better to use gradient for that.

Solution : here is jsfiddle code

.progress-indicator-wrapper {  margin: 0 10px;  font-size: 16px;  color: #2f2f2f;   background-image: linear-gradient(to bottom, #e7e7e7, #d8d8d8);}
.progress-indicator {    display: table;    width: 100%;    text-align: center;    line-height: 20px;}
.progress-indicator > div {    display: table-cell;    margin-top: 0;    padding: 10px;    position: relative;}
.progress-indicator > .progress-active {  padding: 20px 20px 20px 30px;  color: #fff;   background-image: linear-gradient(to bottom, #3498db, #2980b9);}.progress-indicator > .progress-active + div {  padding-left: 20px;}/* Triangle arrow define  */.progress-active::before, .progress-active::after {  content: "";  width: 34px;  padding-bottom: 30px;  position: absolute;  overflow: hidden;  transform: rotate(90deg);  z-index: 2;  
  -webkit-transform-origin: 0 0;  -ms-transform-origin: 0 0;  transform-origin: 0 0;
  background-image: linear-gradient(45deg, #e7e7e7, #d8d8d8);
  -webkit-transform-origin: 0 100%;  -ms-transform-origin: 0 100%;  transform-origin: 0 100%;  -ms-transform: rotate(45deg);  -webkit-transform: rotate(45deg);
  transform: rotate(120deg) skewX(-30deg);}
.progress-active::before {  top: -30px;  left: 0px;}
.progress-active::after {  top: -30px;  right: -34px;   background-image: linear-gradient(45deg, #3498db, #2980b9);}

<div class="progress-indicator-wrapper">
    <div class="progress-indicator">        <div>            <span class="progress-txt">Step 1 </span>        </div>        <div class="progress-active">            <span class="progress-txt">Step 2</span>        </div>        <div>            <span class="progress-txt">Step 3</span>        </div>        <div>            <span class="progress-txt">Step 4</span>        </div>        <div>            <span class="progress-txt">Step 5</span>        </div>    </div>
</div>

Gradient CSS arrow

I've made this by 'cutting out' the arrow from a square div, instead of 'generating' an arrow. It even has a hover effect:

.arrow {  height: 200px;  width: 300px;  background: rgb(169, 3, 41);  background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));  background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);  background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);  background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);  background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);  position: relative;  overflow: hidden;  transition: all 0.8s;}.arrow:before {  content: "";  position: absolute;  top: 0;  width: 70%;  height: calc(100% - 80px);  border-top: 40px solid white;  border-bottom: 40px solid white;  z-index: 10;}.arrow:after {  content: "";  position: absolute;  right: 0;  border-top: 100px solid white;  border-bottom: 100px solid white;  border-left: 100px solid transparent;  z-index: 10;}.perc {  position: absolute;  top: 0;  width: 0%;  height: 100%;  background: rgb(30, 87, 153);  background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));  background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);  background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);  background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);  background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);  z-index: 5;  transition: all 0.8s;}.arrow:hover .perc {  width: 100%;}

<div class="arrow">  <div class="perc"></div></div>

CSS Gradient double-arrow shape with gradient background

I would do it in 3 steps:

create a normal rectangular element with a background gradient (e.g. from orange to red)
create a pseudo element ::before with a background color, the gradient is starting with (e.g. orange)
create a pseudo element ::after with a background color, the gradient is ending with (e.g. red)

Now you just need to position the pseudo elements properly and use the border property to create the triangle shape:

div {  position: relative;  display: inline-block;  text-transform: uppercase;  color: white;  height: 3em;  min-width: 10em;  line-height: 3em;  font-family: Arial;  font-size: 1.5em;  font-weight: bold;  text-align: center;  background: linear-gradient(to right, orange, red);  padding: 0 1em;  margin: 0 1em;}
div::before,div::after {  content: '';  position: absolute;  height: 0;  width: 0;  border-top: 1.5em solid transparent;  border-bottom: 1.5em solid transparent;}
div::before {  left: -1em;  border-right: 1em solid orange;}
div::after {  right: -1em;  border-left: 1em solid red;}

<div>Exemple</div>

Creating a triangle in css with a gradient background

Creating triangles (or other shapes - pentagons, hexagons, octagons, decagons, dodecagons, tetradecagons, octadecagons and so on) with a gradient (or any other kind of image background) is really easy with CSS transforms.

But in this case you don't even need a triangle. You just need to rotate a square pseudo-element by 45deg and apply the gradient on that from corner to corner.

demo

<div class='warn'></div>

CSS:

.warn {
  position: relative;
  margin: 0 auto;
  border: solid 1px darkred;
  width: 12em; height: 3em;
  border-radius: .2em;
  background: linear-gradient(lightcoral, firebrick);
}
.warn:before {
  position: absolute;
  top: 50%; left: 0;
  margin: -.35em -.45em;
  border-left: inherit; border-bottom: inherit;
  /* pick width & height such that 
     the diagonal of the square is 1em = 1/3 the height of the warn bubble */
  width: .7em; height: .7em;
  border-radius: 0 0 0 .2em;
  transform: rotate(45deg);
  background: linear-gradient(-45deg, firebrick -100%, lightcoral 200%);
  content: '';
}

Rounded arrow shape with gradient fill

Caution: This is not quite the way you had in mind to achieve this, but in my opinion this is probably the simplest way to achieve it without resorting to SVG or images or complex angle calculations in gradients. Rotating pseudo-elements etc will cause the other side to mismatch because you have a curved side on the right.

The shape is achieved by using two pseudo-elements which are about half the size of the parent (.rect), skewing them in opposite directions and then positioning them exactly one below the other. The other skewed side (left hand side) is hidden from view by positioning it inside the parent rectangle using the left property of the pseudo-elements.

The required gradient is assigned to both the parent and the pseudo-elements. For the parent the full gradient is applied as required whereas for the pseudo-elements it is split exactly in half between the the :before and :after elements to make it look as a gradual progression.

Since the :before and :after pseudo-elements are effectively children of the main element, a hover on them effectively means an hover on the parent also.

The span contains the text and is positioned with a higher z-index for it to be above the pseudo-elements and thereby be visible.

body {  color: white;  font-family: Impact, fantasy;  font-size: 40px;  line-height: 100px;  text-align: center;}.rect {  height: 100px;  width: 225px;  position: relative;  border-radius: 20px 0px 0px 20px;  background: -webkit-gradient(linear, 0 0, 0 100%, from(#949DA0), to(#545D60));  background: -webkit-linear-gradient(#949DA0, #545D60);  background: -moz-linear-gradient(#949DA0, #545D60);  background: -o-linear-gradient(#949DA0, #545D60);  background: linear-gradient(#949DA0, #545D60);}.rect span {  position: relative;  z-index: 2;}.rect:before {  background: #545D60;  content: "";  position: absolute;  top: 0px;  left: 42px;  height: 51%;  width: 100%;  border-radius: 0px 10px 6px 0px;  background: -webkit-gradient(linear, 0 0, 0 100%, from(#949DA0), to(#747D80));  background: -webkit-linear-gradient(#949DA0, #747D80);  background: -moz-linear-gradient(#949DA0, #747D80);  background: -o-linear-gradient(#949DA0, #747D80);  background: linear-gradient(#949DA0, #747D80);  -webkit-transform: skew(45deg);  -moz-transform: skew(45deg);  transform: skew(45deg);}.rect:after {  background: #545D60;  content: "";  position: absolute;  bottom: 0px;  left: 42px;  height: 51%;  width: 100%;  border-radius: 0px 6px 10px 0px;  background: -webkit-gradient(linear, 0 0, 0 100%, from(#747D80), to(#545D60));  background: -webkit-linear-gradient(#747D80, #545D60);  background: -moz-linear-gradient(#747D80, #545D60);  background: -o-linear-gradient(#747D80, #545D60);  background: linear-gradient(#747D80, #545D60);  -webkit-transform: skew(-45deg);  -moz-transform: skew(-45deg);  transform: skew(-45deg);}.rect:hover {  background: -webkit-gradient(linear, 0 0, 0 100%, from(#545D60), to(#949DA0));  background: -webkit-linear-gradient(#545D60, #949DA0);  background: -moz-linear-gradient(#545D60, #949DA0);  background: -o-linear-gradient(#545D60, #949DA0);  background: linear-gradient(#545D60, #949DA0);}.rect:hover:before {  background: -webkit-gradient(linear, 0 0, 0 100%, from(#545D60), to(#747D80));  background: -webkit-linear-gradient(#545D60, #747D80);  background: -moz-linear-gradient(#545D60, #747D80);  background: -o-linear-gradient(#545D60, #747D80);  background: linear-gradient(#545D60, #747D80);}.rect:hover:after {  background: -webkit-gradient(linear, 0 0, 0 100%, from(#747D80), to(#949DA0));  background: -webkit-linear-gradient(#747D80, #949DA0);  background: -moz-linear-gradient(#747D80, #949DA0);  background: -o-linear-gradient(#747D80, #949DA0);  background: linear-gradient(#747D80, #949DA0);}

<div class="rect"><span>NEXT</span></div>

CSS Gradient for Triangle Shaped Arrow