How to Make a Angled Arrow Like This with Gradient and Transparent

How to make a angled arrow like this with gradient and transparent?

@jitendar; check this out i make it with pure css:

.button {width:70px;
    height:140px;
    overflow:hidden;
}
.button:after {
    content:"";
    width:100px;
    height:100px;
    background: linear-gradient(left top, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    display:block;
    margin-top:20px;
    margin-left:25px;
}

Check the fiddle http://jsfiddle.net/sandeep/aZ65c/7/

Creating an arrow box in css with gradient

Use a rotated pseudo-element with a diagonal gradient:

.fancy-arrow:after {
  content:"";
  display:block;
  width:25px;height:25px;
  background:#f00;
  position:absolute;
  right:-12px;top:5px;

  background: -webkit-linear-gradient(left top,  #7d7e7d 0%,#0e0e0e 100%); 
  -webkit-transform:rotate(45deg);
  z-index:-1;
}

for demonstration purposes only with webkit prefixes. The same could be achieved in IEs with some filter-magic.

working Demo

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/

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>

Create an arrow in css3

No need to use extra elements, this can be done entirely using CSS3:

background-color: gray;
background-image: 
   linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
   linear-gradient(45deg, transparent 75%, #000 75%)   /*left side of triangle*/;
background-position: 30px 0, 0 0;
background-repeat: no-repeat;
background-size: 30px 30px;

Demo (with vendor-prefixes: http://jsfiddle.net/rLZkf/1/).

Explanation of a this triangle technique

As seen in the image below ^source, CSS supports linear colour gradients using a simple syntax.

With some imagination, you can see a triangle in the previous image. The colour blends at the diagonal though. So, we set explicit colour stop locations. When these locations are equal, there's no visual blending any more, and you get a solid triangle.

It's time to introduce a triangle:

background-image: linear-gradient(45deg, transparent 50%, black 50%);

The gradient starts at the bottom-left corner, and ends at the upper-right corner due to the angle of 45°. The colour stop location is defined to be 50%, so the bottom-left part of the triangle is transparent, and the other half is black. To get a different triangle, use an angle of 135°. Here's an image with both angles:

At this point, we know how to create a rectangular triangle. To get further, we need to be able to create a triangle where the hypotenuse is placed vertically or horizontally. To achieve this, we join two triangles. CSS3 introduces support for multiple backgrounds. This feature is used to construct the triangle.

/* Create triangles */
background-image: 
   linear-gradient(135deg, transparent 75%, #000 75%), /*right side of triangle*/
   linear-gradient(45deg, transparent 75%, #000 75%)   /*left side of triangle*/;
/* Move one of the triangles to the right */
background-position: 30px 0, 0 0;
/* Don't repeat the background image (remove this to see what would happen) */
background-repeat: no-repeat;
/* Define the size of the triangle */
background-size: 30px 30px;

In the previous CSS code, one can see that I'm using 75% as a colour stop location (instead of 50%). This choice does not matter, the final shape of the triangle is determined by the values of the gradient's colour stop location, background-position and background-size.

**Note: I left out the vendor prefixes in the explanation. To use this technique, you have to add the vendor-prefixes (as seen in the demo).

Relevant documentation

• Multiple CSS backgrounds
• linear-gradient
• background-position
• background-size
• background-repeat

Arrow button with vertical gradient background

You can design this button using :before selector:

.button {   width: 120px;   height: 50px;      position: relative;   -moz-border-radius:    5px;   -webkit-border-radius: 5px;   border-radius:         5px;   border:1px solid #4d7a9c;    position:relative;   color:white;   font-size:18px;      background: #238fe7; /* Old browsers */  background: -moz-linear-gradient(top,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */  background: -webkit-linear-gradient(top,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */  background: linear-gradient(to bottom,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=0 ); /* IE6-9 */  }
.button:before {  content: "";  position: absolute;  transform: scaleX(0.6) rotate(45deg);  height: 38px;  width: 38px;  right:-18px;  top:5px;  border-radius:  5px;  z-index:-1px;    background: #238fe7; /* Old browsers */  background: -moz-linear-gradient(-45deg,  #238fe7 0%, #156fba 100%); /* FF3.6-15 */  background: -webkit-linear-gradient(-45deg,  #238fe7 0%,#156fba 100%); /* Chrome10-25,Safari5.1-6 */  background: linear-gradient(135deg,  #238fe7 0%,#156fba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#238fe7', endColorstr='#156fba',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */}

<button class="button">Text</button>

How to create a right triangle which has linear-gradient background?

I'd suggest to use the clip-path property instead, so you can reduce and clean the markup and easily use a linear-gradient as the background

Codepen demo

---

.triangle {  display: block;  max-width: 760px;  height: 35px;  background: linear-gradient(to right, orange, red);  clip-path: polygon(0 0, 100% 100%, 0 100%)}

<span class="triangle"></span>

Styling SELECT (Option) tags with gradient and custom arrow

Check this link

background: #6cab26;
background: url(IMAGE_URL); /* fallback */
background: url(IMAGE_URL), -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */
background: url(IMAGE_URL), -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */
background: url(IMAGE_URL),    -moz-linear-gradient(top, #444444, #999999); /* FF3.6+ */
background: url(IMAGE_URL),     -ms-linear-gradient(top, #444444, #999999); /* IE10 */
background: url(IMAGE_URL),      -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */
background: url(IMAGE_URL),         linear-gradient(top, #444444, #999999); /* W3C */

---

Related Topics