我试图通过在我的活动项目菜单上使用“纯”CSS来增加一个箭头。问题是,我有一个奇怪的输出。这是我的。你知道怎么解决这个问题吗?
#cssmenu li.active a {
/* display: inline;
border-bottom: 3px solid #00b8fd;
float: left;
margin: 0;*/
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
}
发布于 2014-05-05 21:07:40
这里的问题是,箭头将与它所描述的li
一样宽。这样做的最好方法是使用css伪元素。您正在查看的内容类似于:
#cssmenu li.active a:before {
content: ' ';
width: 0px;
height: 10px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid black;
display: inline-block;
}
祝你好运!
发布于 2014-05-05 21:07:17
div{
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
对于纯css箭头
发布于 2014-05-05 21:25:16
https://stackoverflow.com/questions/23473144
复制相似问题