CSS樣式導航元素

Question

我一直在嘗試重新創建此菜單已有一段時間了，但僅獲得了很少的成功。 我對CSS並不陌生，但是這個問題使我感到困惑。 我嘗試檢查頁面只是似乎找不到找到每個鏈接的“波浪形”角的秘密。 您能提供的任何幫助將不勝感激。 這是該站點的鏈接：

http://css-tricks.com

在此先感謝您，祝您好運！

Answer 1

CSS-TRICKS為每個選項卡使用嵌入式SVG，顏色是使用CSS設置的。

以下是克里斯本人的精彩介紹： http : //css-tricks.com/using-svg/

這是更詳細的描述： https : //developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Fills_and_Strokes

Answer 2

他在這里使用SVG，如果將其展開，則可以看到根代碼<path id="shape-tab" d="M100,25C79.568,25,84.815,0,59.692,0H11.149C5.027,0,0,4.634,0,10.385V25"></path>

Answer 3

您總是可以嘗試在css-tricks上找到的教程，以及http://css-tricks.com/tabs-with-round-out-borders/

Answer 4

克里斯使用svg來獲得這些形狀。

您也可以使用背景圖像來實現相同的布局。 創建一個精靈，其中包含第一個菜單項圖像和后續菜單項圖像的圖像。 將菜單項position: relative並為其提供z-index值以在每個菜單項上重疊。