Gradient CSS arrow [duplicate] - html

Question

This question already has answers here:
Make CSS3 triangle with linear gradient
(5 answers)
Closed 8 years ago.
How is it possible to make a CSS arrow as a gradient instead os a solid colour?
Here is my CSS"
.breadcrumbDivider .arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid gold;
position: relative;
margin-left: 360px;
}
I tried using the CSS gradient background image gradient but it takes the border parameter but unsure how to overcome this?
Here is the gradient I am trying to use...
background-color: #c9bc9e;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c9bc9e), to(#a89464));
background-image: -webkit-linear-gradient(top, #c9bc9e, #a89464);
background-image: -moz-linear-gradient(top, #c9bc9e, #a89464);
background-image: -ms-linear-gradient(top, #c9bc9e, #a89464);
background-image: -o-linear-gradient(top, #c9bc9e, #a89464);
background-image: linear-gradient(top, #c9bc9e,#a89464);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c9bc9e', endColorStr='#a89464');

Answer 1

I've made this by 'cutting out' the arrow from a square div, instead of 'generating' an arrow. It even has a hover effect:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 70%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.perc {
position: absolute;
top: 0;
width: 0%;
height: 100%;
background: rgb(30, 87, 153);
background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
z-index: 5;
transition: all 0.8s;
}
.arrow:hover .perc {
width: 100%;
}
<div class="arrow">
<div class="perc"></div>
</div>
Note
Originally designed for a progress bar, but hover effect can be removed if necessary.
Is suitable for a block coloured background only
So, if I cut the 'fancy stuff' and show you how it works:
Hover the one below to see the magic:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0px;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.arrow:hover:before {
border-top: 40px solid tomato;
border-bottom: 40px solid tomato;
}
.arrow:hover:after {
border-top: 100px solid yellow;
border-bottom: 100px solid blue;
}
<div class="arrow"></div>