Question

我正在开发一个具有主导航部分和子导航部分的网站。选择某个项目时，我希望在所选列表项目下方显示一个三角形。三角形需要看起来像它来自它下面的区域。换句话说，看起来像这样：

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

我创建了一个JSFiddle。可以找到那个小提琴here。从小提琴，你可以看到我有几个问题。首先，我似乎无法创建一个三角形。我目前有一些看起来更像标签的东西。这些是通过一些看起来像这样的CSS创建的：

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

另一个问题是我无法弄清楚如何让三角形与底部齐平。也许我一切都错了。基本上，我正在尝试做一些类似于原始DIGG设计的事情（http://speckycdn.sdm.netdna-cdn.com/wp-content/uploads/2011/11/digg-old-v3-subnavigation-menu.jpg）。

感谢您的帮助！

Answer 1

尝试类似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/

Answer 2

可以使用以下css从单个<div>创建向上的三角形：

.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/

找到更多信息和三角形

在CSS中创建三角形标记

2 个答案: