纯CSS三角形的一种方法

CSS三角形

在WEB中下三角形经常表示此处还有下拉。实现CSS三角形的方法有几种,有用3个容器拼凑的,还有用纯边框实现的。今天分析一下第一种实现方法。

原理剖析:

CSS三角形原理分析

将一个顶边长5像素,高3像素的三角形放大3200倍如上图。

CSS三角形分析

从上图开始出发:

  1. 创建一个宽5,高3的DIV,display设置为内联:display:inline-block;
  2. 创建3个em,每个高度都为1px。为了让它宽度有效且独占一行,display设置为块:display:block;
  3. 第一个em的宽度为5px。第二个em的宽度为3px,且两边分别间隙为1px(margin:0 1px;)。第三个em的宽度为1px,且两边分别间隙为2px(margin:0 2px;)。

代码&演示

代码以及演示:纯CSS实现三角形的一种思路

纯CSS三角形的一种方法

16 条用户评论。
  1. 评论 发表时间:02-12 18:43 1楼

    经鉴定,技术文,略过~~

  2. 评论 发表时间:02-12 19:05 2楼

    感觉超复杂,我会觉得图图简单些

  3. 评论 发表时间:02-12 23:22 3楼

    像我等懒人估计就直接上图了……

  4. 评论 发表时间:02-14 20:12 4楼

    我喜欢这个代码及演示,对于我这种代码小白来说简直太完美了,哈哈

  5. 评论 发表时间:02-15 11:04 5楼

    技术文啊,我就只好打打酱油了~~

  6. cho cho
    评论 发表时间:02-17 21:08 6楼

    可以使用字符来显示,譬如△▲▽▼◢◣◤◥⊿。我觉得这个方便多了。

    1. 评论 发表时间:02-17 22:06

      嗯嗯~这是最简单的了。而且兼容还不错。其实border来实现,效果最好了,但是不好理解

      1. 评论 发表时间:02-19 22:32

        typecho官网上面不就是用的字符⇓ 提供下载的连接..其实这种字符弄个日,雪人什么的小图也很有爱的..a31;
        例如MG12的这一篇http://www.neoease.com/using-html-symbol-entities/

      2. 评论 发表时间:02-19 22:35

        .....我的评论居然被过滤了

  7. an9 an9
    评论 发表时间:02-19 13:47 7楼

    大白路过.吼吼.

  8. 评论 发表时间:02-19 21:55 8楼

    潜水多次,今天跟风一下打打酱油。。

  9. Tmd Tmd
    评论 发表时间:02-23 09:25 9楼

    这个好,记录下

  10. 评论 发表时间:03-02 19:02 10楼

    很不错的一个CSS应用,学习了!

  11. 评论 发表时间:03-16 09:55 11楼

    谢谢博主分享了啊

  12. 评论 发表时间:04-10 22:25 12楼

    感觉好像ps

  13. 评论 发表时间:08-26 23:24 13楼

    一直用border

添加新评论 »