CODEWITHSUNDEEP
cssnavigationbreadcrumbslinear-gradients
Sowmya
Sowmya

Reputation: 26969

Gradient color for css triangle

I have navigation menu which has css arrow. I could get the gradient effect to the navigation menu items but not able to get it for arrow.

<ul id="content_navigation">
        <li><a href="">Test Link 1</a></li>
        <li><a href="">Test Link 2</a></li>
        <li><a href="">Test Link 3</a></li>
        <li><a href="">Test Link 4</a></li>
        <li><a href="" class="current">Test Link 5</a></li>
    </ul>

CSS is quite long so added working fiddle below.

Here is the working fiddle

Found a similar question with perfect answer but I am not able to implement the same in my code.

Upvotes: 0

Views: 137

Answers (1)

Christoph
Christoph

Reputation: 51201

The key points for achieving this are a rotation + skew and the rotated gradient:

#content_navigation a::after,
#content_navigation a::before{
   -webkit-transform:rotate(45deg) skew(20deg,20deg);
   -webkit-transform-origin:0 0;
   background: -webkit-linear-gradient(135deg,  #fefefe 0%,#e1e1e1 100%);
   /* just for better understanding you should change the bg-color
   to understand how this is done*/
   background:red;
   border-top:1px solid red;
   border-right:1px solid red;
}

The big disadvantage is that you need to declare an explicit width + height on those elements. Also the pseudoelement might overlap content. To avoid this you need to modify the z-index to push it to the background. The advantage over the border-trick is you could even use a box-shadow.

Here is a link of your modified Fiddle working in Chrome only. But you should be able to work this out on your own now.

Upvotes: 1

Related Questions