0

我有导航菜单，其中有 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 很长，所以在下面添加了工作小提琴。

这是工作小提琴

找到了一个具有完美答案的类似问题，但我无法在我的代码中实现相同的问题。

4

1 回答 1

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 以将其推送到后台。与边界技巧相比的优势是您甚至可以使用box-shadow.

这是您修改后的 Fiddle仅在 Chrome 中工作的链接。但是你现在应该可以自己解决这个问题了。

于 2013-04-13T20:22:20.903 回答