首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS三角形箭头菜单活动项

CSS三角形箭头菜单活动项
EN

Stack Overflow用户
提问于 2014-05-05 21:01:05
回答 3查看 6.5K关注 0票数 0

我试图通过在我的活动项目菜单上使用“纯”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;
}
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 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;
}

祝你好运!

更新小提琴http://jsfiddle.net/XLfcY/

票数 2
EN

Stack Overflow用户

发布于 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箭头

票数 0
EN

Stack Overflow用户

发布于 2014-05-05 21:25:16

如你所问,底部的箭头

position: relative;
top: 60px;

这里是小提琴链接http://jsfiddle.net/suriyag/HwcTn/1/

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/23473144

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档