Question

我的导航菜单有css箭头。我可以获得导航菜单项的渐变效果，但无法获得箭头效果。

<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很长，所以在下面添加了工作小提琴。

这是工作fiddle

找到一个 similar question 并提供完美答案，但我无法在我的代码中实现相同的内容。

Answer 1

实现这一目标的关键点是旋转+倾斜和旋转的渐变：

#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;
}

最大的缺点是你需要在这些元素上声明一个明确的宽度+高度。伪元素也可能与内容重叠。要避免这种情况，您需要修改z-index以将其推送到后台。优于border-trick的优点是你甚至可以使用box-shadow。

以下是仅在Chrome中使用modified Fiddle的链接。但是你现在应该可以自己解决这个问题了。

css三角形的渐变颜色

1 个答案: