Q

CSS導航 - CSS三角形

css
sass

2012-10-09 48 views 0 likes

0

Trying to create this CSS導航 - CSS三角形

，需要一些幫助

這裏是事物此刻的狀態（我已經刪除響應部分）

基本上我被困在如何創建下拉三角形，以便它工作，並居中。 - 導航是出來一個CMS，所以我不能確定導航點的確切尺寸（寬度）

基本上，我似乎有一個大腦崩潰，需要幫助！

PS - 的CSS從指南針/ SASS使用骨架

2012-10-09 John Smith

+0

位置爲三角形的元件，使得它在水平方向居中的對象的下方，豎直地定位，以便三角形重疊。然後做邊框/寬度修改，以獲得頂部邊框創建你想要的三角形。 –

A

回答

2

三角形到來，現在可以用僞類處理。

看一看這個搗鼓了一個想法：

http://jsfiddle.net/carlosmartinezt/PwEyq/

然而，在你的情況，你還需要在邊界，這使得它更難的三角形。我認爲最快的解決方案是使用圖像。

2012-10-09 12:05:41

+0

嗯，我已經踢出了我的邊界，並編輯了我的jsfiddle，但不知何故仍然沒有三角形。顯然有些東西還是錯的，但我無法發現它。已修改[link] http://jsfiddle.net/carlosmartinezt/PwEyq/ –

0

確定了它與下列工作 - 已經更新我的jsfiddle

.keith > li:hover { 
    position: relative; background: #ffffff; border: 1px solid #005381; 
    color:#005381; 
    z-index: 100000; 
} 
.keith > li:hover:after, .keith > li:hover:before { 
    top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; 
} 
.keith > li:hover:after { border-color: rgba(255, 255, 255, 0); border-top-color: #ffffff; 
border-width: 10px; left: 50%; margin-left: -10px; } 
.keith > li:hover:before { border-color: rgba(0, 83, 129, 0); 
border-top-color: #005381; border-width: 11px; left: 50%; margin-left: -11px; }

2012-10-09 15:01:25

相關問題