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>
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>
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>
Forcing transparent background on CSS triangle with linear gradient
An easy way to achieve this effect, is to take a square, and rotate it.
My only changes to your css are in the ".inner-nav li.active a:after, .inner-nav li.current-menu-item a:after" selector.
.inner-nav { float: left; display: block; width: 300px; position: relative; z-index: 50; z-index: 1;}
.inner-nav li { padding: 0 !important; float: left; display: block; height: 42px; width: 100%; margin: 0 0 1px; font-size: 14px; font-weight: 600; line-height: 42px; text-shadow: 0 1px 1px rgba(0,0,0,0.15); background: rgb(193,182,174); background: -moz-linear-gradient(top, rgba(193,182,174,1) 0%, rgba(186,172,163,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(193,182,174,1)), color-stop(100%,rgba(186,172,163,1))); background: -webkit-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%); background: -o-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%); background: -ms-linear-gradient(top, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%); background: linear-gradient(to bottom, rgba(193,182,174,1) 0%,rgba(186,172,163,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c1b6ae', endColorstr='#baaca3',GradientType=0 ); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear;}
.inner-nav li { background: rgb(240,192,96); background: -moz-linear-gradient(top, rgba(240,192,96,1) 0%, rgba(240,216,144,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(240,192,96,1,1)), color-stop(100%,rgba(240,216,144,1))); background: -webkit-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%); background: -o-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%); background: -ms-linear-gradient(top, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%); background: linear-gradient(to bottom, rgba(240,192,96,1,1) 0%,rgba(240,216,144,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F0C060', endColorstr='#F0D890',GradientType=0 ); -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -o-transition: all 0.3s linear; -ms-transition: all 0.3s linear; transition: all 0.3s linear;}
.inner-nav li i { position: absolute; left: 0; font-size: 22px; padding: 10px 0 0 15px; color: #ffffff; height: 42px;}
.fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.inner-nav li a { float: left; display: block; color: #fff; padding: 0 0 0 41px; width: 100%; height: 100%; position: relative; font-weight: 600;}
.inner-nav li a { padding-left: 45px !important;}
.inner-nav .description a:before { content: "\e88f";}.inner-nav li a:before { font-family: 'Material Icons'; font-size: 24px; font-weight: 400; position: absolute; top: 0; left: 10px;}
.inner-nav li.active, .inner-nav li.active:hover, .inner-nav li.current-menu-item, .inner-nav li.current-menu-item:hover { background: rgb(91,181,200); background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, rgba(91,181,200,1) 0%, rgba(62,165,187,1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(91,181,200,1)), color-stop(100%,rgba(62,165,187,1))); background: -webkit-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%); background: -o-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%); background: -ms-linear-gradient(top, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%); background: linear-gradient(to bottom, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5bb5c8', endColorstr='#3ea5bb',GradientType=0 ); width: 110%;}
.inner-nav li.active a:after, .inner-nav li.current-menu-item a:after { content: ""; position: absolute; top: 0; right: 3px; width: 42px; height: 42px; /* border-style: solid; */ /* border-width: 21px 0 21px 21px; */}
.inner-nav li.active a:after, .inner-nav li.current-menu-item a:after { position: absolute; top: 6px; right: 30px; width: 30px; height: 30px; -webkit-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); background: linear-gradient(45deg, rgba(91,181,200,1) 0%,rgba(62,165,187,1) 100%);}
<nav class="inner-nav"> <ul> <li class="description active" id=""><i class="fa fa-info-circle"></i><a href="#description" title="Description">Description</a></li><li class="facilities" id=""><i class="fa fa-tasks"></i><a href="#facilities" title="Facilities">Facilities</a></li><li class="availability" id=""><i class="fa fa-clock-o"></i><a href="#availability" title="Availability">Availability</a></li> <li class="pricing"> <i class="fa fa-gbp"></i><a href="#pricing" title="Pricing">Pricing</a> </li> </ul> </nav>
Related Topics
How to Get "Position:Fixed" CSS to Work in IE 7+ with Transitional Doctype
CSS Selector for <Input Type=""
Does IE9 Support CSS Linear Gradients
Build List of Selectors with Less
CSS Media Queries Min-Width and Min-Device-Width Conflicting
Scrollbar Color Change in Firefox
Why Doesn't This CSS :Not() Declaration Filter Down
Vertically Align Text Within Input Field of Fixed-Height Without Display: Table or Padding
How to Select an Element Only When Inside Another Element
How to Combine Two Media Queries
::Before Pseudo-Element Stacking Order Issue
CSS Selector (Id Contains Part of Text)
Set Position Absolute and Margin
Without Media Queries How to Achieve 3 Column Desktop to 1 Column Mobile Layout
Styling Mat-Select in Angular Material
Vertical Align Table-Cell Don't Work with Position Absolute
Placing Background Image in a Rhombus Shaped Container Is Causing the Container to Lose Its Shape