• 前端开发中箭头形状的制作及对边框定义的一些疑问


    新浪微博评论界面如下,注意右上角的箭头符号。

    看了看其箭头符号的实现方法,发现是用一个<em>元素加一个特殊符号制作的

    于是就想用html元素来实现同样的效果,在实验过程中发现了一种方法达到目标,代码如下:

    <style type="text/css">
    div.arrow
    {
    width
    :0px;
    height
    :0px;
    border-bottom
    :50px solid #F00;
    border-left
    :50px solid #fff;
    border-right
    :50px solid #fff;
    }
    </style>
    </head>
    <body>
    <div class="arrow"></div>
    </body>

    效果请看demo:http://wandouyouxi.com/cnblogs/css/untitled-1.html

    在这种效果中,可以分别制作出向前后左右四个方向的箭头。例如向上的箭头,只要在css中设置border-bottom,然后设置左右border为白色即可。同理向右的箭头,需要设置border-right,然后将上下border为白色。

    最后,要说明的是,我对这种方法的原理还不太清楚。如下图所示,

          

    为何在设置了下边框的情况下再去设置左边框,左边框会覆盖下边框,但是为什么分界的地方是斜线呢?去w3c看了下边框的定义:

    还是不明白上面提出的疑问,请知道的园友们不吝赐教。

    作者: caochao
    邮箱: caochao88@gmail.com
    出处: http://www.cnblogs.com/tudas
    本文版权归作者和博客园共有,欢迎转载,未经作者同意须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

    如果您觉得本文的内容对您的学习有所帮助: 捐助共勉
  • 相关阅读:
    bootstrap学习(全局CSS样式)(二)
    第八周
    bootstrap学习(全局CSS样式)(一)
    变量的解构赋值 ES6
    ES6的let和const命令
    github之怎么上传本地项目
    浅谈js对象及对象属性
    解决sublime text3 文件名,小框框的办法
    web04--cookie
    web03--session
  • 原文地址:https://www.cnblogs.com/tudas/p/css_arrow.html
Copyright © 2020-2023  润新知