在这个CSS下拉菜单中,下箭头来自哪里

这个问题在这里已经有了答案:

  • CSS三角形如何工作? 18个答案

  • 你用于#nav span:after的CSS #nav span:after是三角形。

    看看这个网站https://css-tricks.com/examples/ShapesOfCSS/并向下滚动到“Triangle Down”。


    看起来他们正在使用CSS3在span:after绘制箭头span:after

    他们使用border属性来使其工作。

    #nav span:after {
      width: 0;
      height: 0;
      border: 0.313em solid transparent;
      border-bottom: none;
      border-top-color: #efa585;
      content: '';
      vertical-align: middle;
      display: inline-block;
      position: relative;
      right: -0.313em;
    }
    <div id="nav"><span>Test Arrow</span></div>

    下拉箭头似乎连接到li的链接中的span子元素的伪元素之后。

    这是跨度在标记中的位置:

    <ul class="clearfix">
        <li class="active">
            <a href="?blog"><span>Blog</span></a>
    

    这是css规则:

    #nav span::after
    

    此规则的内容和边框颜色属性似乎是渲染和风格上修改下拉箭头的内容。

    链接地址: http://www.djcxy.com/p/89485.html

    上一篇: Where does the down arrow come from in this CSS drop

    下一篇: Banner with angled shapes