css traingle的漸變色

我有導航菜單，它有css箭頭。我可以獲得導航菜單項的漸變效果，但無法獲取箭頭。css traingle的漸變色

<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與完美的答案，但我沒能實現同樣的在我的代碼。

來源

2013-04-13 Sowmya

你無法通過邊界顏色三角實現這一點。然而，你可以做的是使用斜角梯度旋轉45°的僞元素。您需要相應地調整z-index。 – Christoph

@Christoph好，有可能給。檢查我更新的問題，有一個類似的問題鏈接 – Sowmya

@Sowmya這正是我告訴你的。旋轉僞元素並對其應用漸變。我會發布你的答案。 – Christoph

實現這一目標的關鍵點是旋轉+傾斜和旋轉梯度：

#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。

以下是您的modified Fiddle僅適用於Chrome的鏈接。但你現在應該可以自己解決這個問題。

來源

2013-04-13 20:22:20 Christoph

@Matt我的，請停止在我的編輯中編輯... – Christoph

css traingle的漸變色

回答

相關問題