在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中创建一个三角形标记

回答

相关问题