Creating a triangle in css with a gradient background

Question

I am trying to create a triangle in css with a gradient background. I have not had any success as yet. Is there way to do this to bring off this effect seen in the image below. (The triangle that is attached to the Wrong password error box.)

Design in Photoshop enter image description here

This is the design I have so far in HTML and CSS.

enter image description here

Here is the css I have for the triangle at the moment.

.error-triangle {
    wwidth: 0;
    height: 0;
    border-top:    10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:  10px solid blue;
    margin-top: 64px;
    margin-left: 350px;
    position: fixed;
    -webkit-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
       -moz-box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
            box-shadow: 0 0 3px rgba(102,65,65,.25), 2px 3px 5px rgba(70,34,34,.25), inset 1px 2px rgba(255,255,255,.25);
    background-image: -webkit-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:    -moz-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:      -o-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:     -ms-linear-gradient(bottom, #eb6767, #d94040 35%, #eb6767);
    background-image:         linear-gradient(to top, #eb6767, #d94040 35%, #eb6767);
}

I was using this tutorial on CSS tricks.

css only arrows: http://cssarrowplease.com/ – Luca Mar 15 '13 at 17:08 — Luca, Mar 15 '13 at 17:08

score 17 · Accepted Answer · edited Jun 20 '20 at 09:12

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

this looks awesome. can you also add text shadow to the code ? thank you — Furkan Gözükara, Aug 16 '13 at 19:49

score 0 · Answer 2 · answered Mar 15 '13 at 16:18

0

You can create a CSS triangle, but not a CSS triangle that is itself a gradient. The only trick I would suggest is to pick a color that most resembles the color within the gradient background. It just depends on how big your gradient actually is, and how well the triangle will blend in.

For the red div, you could try using the color #d94040, but then it will lack a border and a drop shadow. However, these can be added. To add a border to a CSS triangle, you can place a inside your that is also a CSS triangle that is the same size. TThis would require using absolute positioning and z-index to overlap them.

Or you can use ::after or ::before to create your CSS triangles without the added HTML code, but then that would only work in modern browsers only.

answered Mar 15 '13 at 16:18

Xarcell

2,011
6
33
65

Ok. So do you think it would be best if I just use an image of the triangle instead? – Joel Dean Mar 15 '13 at 16:21
If it were me, I wouldn't use a gradient at all. That would make it look less like a button, and more like a warning. – Xarcell Mar 15 '13 at 16:24
2

Actually, you can create a triangle with a gradient background very easily by using transforms. http://codepen.io/thebabydino/pen/cBmxv – Ana Mar 15 '13 at 17:45

score 0 · Answer 3 · answered Mar 15 '13 at 16:38

In CSS3, you can create a triangle with the 'border trick'. This border can be colored and can have a background.

WebKit now (and Chrome 12 at least) supports gradients as border image.

For a more supported solution i suggest you to 'gradient' the background of a :before pseudo element for witch you would apply a 'background-gradient' + the ( css triangle with border ) trick.

Here is a cssTriangle generator for you to experiment.

Creating a triangle in css with a gradient background

3 Answers3

demo

Linked