在CSS中創建一個三角形標記

我正在一個網站上有一個主導航部分和一個子導航部分。選擇某個項目時，我想要一個三角形出現在所選列表項目下方。三角形需要看起來像它來自它下面的區域。換句話說，看起來像這樣的東西：在CSS中創建一個三角形標記

+------------------------------------+ 
| Parent 1  Parent 2  Parent 3 | 
+-----------------^------------------+ 
| Child 1  Child 2  Child 3 | 
+---------------------------^--------+ 
| Information goes here    | 
+------------------------------------+

我創建了一個JSFiddle。那小提琴可以找到here。從小提琴中，你可以看到我有幾個問題。首先，我似乎無法創建一個三角形。我目前有一些看起來更像標籤的東西。

.mainSelected {  
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #95A9C2; 
    text-align:center; 
}

的另一個問題是，我無法弄清楚如何獲得對三角形底部齊平：這些都是通過一些CSS，看起來像這樣創建的。也許我會說這一切都錯了。基本上，我試圖做類似於原始DIGG設計（http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/11/digg-old-v3-subnavigation-menu.jpg）。

謝謝你的幫助！

來源

2014-02-27 user687554

結賬時發現這個職位 - http://stackoverflow.com/questions/9450733/css-triangle-custom-border-color – Evgeniy

嘗試類似this。

.mainSelected { 
    text-align: center; 
    position: relative; 
} 

/* this is the actual triangle */ 
.mainSelected:after { 
    content: ' '; 
    width: 0; 
    height: 0; 
    display: block; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
    border-bottom: 10px solid #95A9C2; 
    position: relative; 
    left: 40%; 
}

你可以看到爲什麼它在這裏工作：http://css-tricks.com/snippets/css/css-triangle/

來源

2014-02-27 07:10:10 Roberto

朝上的三角形可以從一個單一的<div>與下面的CSS創建：

.arrow-up-div { 
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent; 
    border-right: 5px solid transparent; 

    border-bottom: 5px solid black; 
}

凡div有類arrow-up-div 。

更多信息和三角形可以在http://css-tricks.com/snippets/css/css-triangle/

來源

2014-02-27 11:00:12

在CSS中創建一個三角形標記

回答

相關問題