用css制作一个三角形箭头

2011-11-15作者 : Jimco分类 : HTML/CSS 标签: CSS IE6 前端

  不废话,我们先来看个样式,如果设置元素边框,会怎么样:

test


  似乎看不出什么,让我给四个边框加上不同的颜色再看看:

test


  是不是发现了些什么?对,让我们把中间的文字去掉:

 

  这样,就出现4个三角形了,然后我们如果需要顶部那个三角形,只需要将border的left、right、bottom设置成背景色就行了:

 

  这样,我们需要的三角形就出现了,并且可以设置4个不同方向的了:

    

  样式代码很简单,就几句话:

<strong style="float:left; border-style:solid; border-width:10px; border-color:#000 #ccc #ccc #ccc; height:0; width:0; font-size:0"></strong>

  东西很简单,但想到用border边框来制作三角形箭头确实有点剑走偏锋了,用的相当巧妙。

  PS:因为编辑器里发的demo不能出现空标签,也就是我必须在<strong></strong>标签里加个空格,如:<strong>&nbspl;</strong>,但这就导致IE6下显示错误,其实是可以的,大家试试就知道了。

765 人围观 / 15 条评论↓快速评论↓

  • 阿狸1看到那一串串代码难受!

    简单生活 2011-11-15 17:18 回复

    • @简单生活:阿狸2这个代码量还不至于吧~

      Jimco 2011-11-15 17:20 回复

我来说说:

(必须)

(必须,保密)

阿狸1 阿狸2 阿狸3 阿狸4 阿狸5 阿狸6 阿狸7 阿狸8 阿狸9 阿狸10 阿狸11 阿狸12 阿狸13 阿狸14 阿狸15 阿狸16 阿狸17 阿狸18

Powered by emlog

版权所有,保留一切权利! ©2011 前端那些事儿 Designed by Jimco About me | 意见反馈