CSS Triangle with Gradient

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 triangle with gradient

To keep the proportions you need, you can use an inline SVG with the preserveAspectRatio="none" property (see MDN). This way, the width and height are fixed to the viewport unit you used.

You can use the polygon element to make the triangle and the linearGradient element to fill the triangle with a gradient :

svg {  width: 50vw;  height: 120vh;}

<svg viewBox="0 0 10 10" preserveAspectRatio="none">  <defs>    <linearGradient id="gradient">      <stop offset="5%" stop-color="darkorange" />      <stop offset="95%" stop-color="red" />    </linearGradient>  </defs>  <polygon fill="url(#gradient)" points="0 0 10 0 0 10" /></svg>

Gradient triangles

Simply use clip-path to create the triangle:

.triangle {  width: 100px;  height:86.6px; /* 0.866 * Width in order to have an equilateral triangle [0.866 = (sqrt(3)/2)] */  background-image: linear-gradient(to bottom right, black, blue);  clip-path:polygon(50% 0,100% 100%, 0 100%);}

<div class="triangle"></div>

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>

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

How to create a right triangle gradient

Use a conic-gradient

.play {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  width: 90px;
  height: 90px;
  cursor: pointer;
  background: conic-gradient(from -135deg at right,red 90deg,#0000 0) 55% 50%/22px 44px no-repeat;
  border: 9px solid red;
  border-radius: 50%;
  }

<button class="play" type="button" aria-label="Close"></button>

CSS color transition in triangles with linear gradient

One posibility, that is cross-browser but that gives washed colors, is to overlay the triangles with a semitransparent gradient that is white on one side and black in the other.

This effect gets much better using blend modes, but the support is lower.

.test {    width: 400px;  height: 300px;  background-image: linear-gradient(to left, rgba(0,0,0,.5), rgba(0,0,0,0) 40%,    rgba(255,255,255,0) 60%, rgba(255,255,255,.5)),     linear-gradient(to top right, blue 50%, fuchsia 50%);
}

<div class="test"></div>

---

Related Topics