Is there a way to create a CSS arrow with a gradient instead of a solid color?
Below is the CSS I have been experimenting with:
.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 attempted using a CSS gradient background image, but it seems to conflict with the border parameter. Any tips on how to resolve this issue?
Here is the gradient code I am attempting to apply...
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');