用css的border属性实现三角

今天啄米鸟给我了一个冰剑的《em实现倒三角的提示效果》。仔细琢磨了一下运用的还是很巧妙的,在现实的前端开发中也很有用,至少可以减小图片的字节。

先看看应用实例吧:

11

实现的原来就是:在一个宽高为0像素的块状元素中设置border属性,例如

[code=”css”]

.box{

width:0px;

height:0;

border-bottom:50px #F00 solid;

border-left:50px #03F solid;

border-right: 50px #F90 solid;

border-top:50px #6C0 solid;

}

[/code]

在浏览器中的显示如图:

2009-09-14_225923

点击查看demo:https://www.html.cn/demo/border/border1.html

这样就有上下左右四个三角形了,再把除了要用的三角外的其他3个三角(border)颜色设置为背景色就ok了。

例如这样就能得到一个颜色为#CCC的向上的三角:

[code=”css”]

.to-top{

display:block;

overflow:hidden;

width:0px;

height:0px;

border:6px solid #ccc;

border-color:#ccc #fff;

border-width:0 6px 6px 6px;

}

[/code]

更多的实例请点击查看demo:https://www.html.cn/demo/border/border.html

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 用css的border属性实现三角

评论 25

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    没想到三角还能用这种实现。看来没有做不到,只有想不到。

    vapour9年前 (2009-09-15)回复
  2. #-48

    这个早就有书上说过。。。

    jimzhan9年前 (2009-09-15)回复
  3. #-47

    赞个,以前在哪里看过相似的文章,不错啊

    小木9年前 (2009-09-15)回复
  4. #-46

    蛮有趣的,呵呵,不过为了一个三角添加了那么多的空标签有点那个……

    danceing_yao9年前 (2009-09-15)回复
  5. #-45

    to:danceing_yao
    多的空标签?一个三角只有一个标签啊!

    9年前 (2009-09-15)回复
  6. #-44

    呵呵,不错,很久以前看过关于脚的做法,不过没这么用过

    bujichong9年前 (2009-09-15)回复
  7. #-43

    IE 下可能还会有些“扭曲”,其实吧 font-size 设置成 0px 即可

    明城9年前 (2009-09-15)回复
  8. #-42

    帅!!!!!!!!!

    柴鸡不柴9年前 (2009-09-16)回复
  9. #-41

    不可思议

    cz9年前 (2009-09-23)回复
  10. #-40

    学习了,真神奇啊

    mx17009年前 (2009-09-30)回复
  11. #-39

    太棒了,真喜欢这种效果。

    1239年前 (2009-10-09)回复
  12. #-38

    在IE6下 为什么会有不同呢

    sheak9年前 (2009-10-18)回复
  13. #-37

    顶个,爽

    dkl9年前 (2009-11-17)回复
  14. #-36

    IE下的锯齿很多~不知道有法解决没

    yaya9年前 (2010-01-08)回复
  15. #-35

    确实不错,不过这个有一个局限性,如果背景是图片的话,或者跟border的颜色不一致的时候就有点难看了。

    若比邻9年前 (2010-03-23)回复
  16. #-34

    居然可以写出来呀,又长见识了

    lovebslq8年前 (2011-08-17)回复
  17. #-33

    厉害厉害 长见识了~~~~

    fmost7年前 (2011-11-02)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏