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/
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 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>
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>
Creating a background-image gradient triangle that is horizontally centered
You can do this with SVG
html,body { margin: 0}
svg { width: 100%;}
<svg viewBox="0 0 1920 400" height="400" preserveAspectRatio="xMidYMax slice"> <defs> <linearGradient id="Gradient1" x1="0" x2="0" y1="0" y2="1"> <stop offset="0%" stop-color="#65AAB0"></stop> <stop offset="100%" stop-color="#AEE2B6"></stop> </linearGradient> </defs> <polygon points="0,0 960,400 1920,0" fill="url(#Gradient1)"></polygon></svg>
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>
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>
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
Why Doesn't Justify-Content: Stretch Work
Box Sizing on Inputs in Firefox Hides Text
Css: Semi-Transparent Background and an Image
Relative Padding Is Relative to What
Is Decimal Precision When Specifying a Font-Size Respected by All Browsers
CSS Modules - Referencing Classes from Other Modules
How to Add List-Style-Type: "Disc" to <P> Tag
Input Padding Cutting Out Text in Firefox
Cypress Testing Pseudo CSS Class :Before
Make Div as Wide as It Needs to Be
Why Is My Bootstrap Code Not Working
How to Put Custom Content Like a Linebreak Inside P:Column Header
Svg Symbols Not Being Displayed in Firefox
CSS Transition on Png Sequence Using Steps