css制作三角图标

avatar 2015年10月20日19:18:51 10

工作中有时候一个三角图标来不及切图或者你就是不想切图,那就用下面的方法解决。

1
2
3
4
5
6
7
8
9
10
/* create an arrow that points up */
div.arrow-up {
  width:0px;
  height:0px;
  border-left:5px solid transparent;  /* left arrow slant */
  border-right:5px solid transparent/* right arrow slant */
  border-bottom:5px solid #2f2f2f;    /* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
1
2
3
4
5
6
7
8
9
10
/* create an arrow that points down */
div.arrow-down {
  width:0px;
  height:0px;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:5px solid #2f2f2f;
  font-size:0px;
  line-height:0px;
}
1
2
3
4
5
6
7
8
9
10
/* create an arrow that points left */
div.arrow-left {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent/* right arrow slant */
  border-right:5px solid #2f2f2f/* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
1
2
3
4
5
6
7
8
9
10
/* create an arrow that points right */
div.arrow-right {
  width:0px;
  height:0px;
  border-bottom:5px solid transparent;  /* left arrow slant */
  border-top:5px solid transparent/* right arrow slant */
  border-left:5px solid #2f2f2f/* bottom, add background color here */
  font-size:0px;
  line-height:0px;
}
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:10   其中:访客  10   博主  0

    • avatar bateer 0

      从百度点进来的,支持一下

      • avatar 益群网 0

        看一看来瞧一瞧,这个博客真是好!

        • avatar 2682472248 0

          我又来了,您高兴吗?!

          • avatar 1463895059 0

            看看!

            • avatar 一元营销 0

              确实不错,这个要实话实说!

              • avatar 易路营销 0

                到此一游,立贴为证!

                • avatar 增达信购 0

                  博文值得拜读。受益了!

                  • avatar zengda 0

                    研究研究,学习学习。

                    • avatar 三五美女网 0

                      常来看看,受益匪浅。

                      • avatar 549777318 0

                        看看您的博客!