此CSS如何工作

This web page使用垂直菜單，顯示從當前選定菜單項指向頁面的整齊小箭頭。我在Chrome中查看了代碼並發現了以下內容。此CSS如何工作

對於顯示的箭頭的標記是

<利類= 「當前」 > <一個... > :: 之前「歡迎」 < /一個>
錨

對應的CSS是

aside li.current a:before 
{ 
content:""; 
border-color:transparent transparent transparent #fff; 
border-style:solid; 
border-width:10px; 
width:0;height:0;position:absolute;left:-30px; 
}

我對這裏發生的事有一個公平的想法，但我還沒有完全弄清楚最終結果是如何指向左邊的三角形。也許有人比我更瞭解CSS可能會解釋一下？

來源

2014-01-24 DroidOS

https://www.google.com/search?q=css+triangle – CBroe

不錯！謝謝。 Google對於CSS + Triangle從來沒有想過，但是您的評論促使我嘗試[CSS形狀]（http://www.css3shapes.com）。希望它能幫助其他人進入這個線程。 – DroidOS

你已經使用了右上角和底角透明的邊框顏色，所以它會佔用左主格的顏色。也正如你曾經使用過的：在每一個標籤開始之前都會創建這種結構，其中沒有內容，並且絕對位置可以設置爲三角形視圖...

如果刪除從你的代碼透明，並給邊界顏色，你可以看到，它最初就像簡單的方形框。所以，它是一個CSS技巧和竅門，使用CSS來製作形狀。

來源

2014-01-24 10:43:39 Dzyneeweb

此CSS如何工作

回答

相關問題