css3制作导航三角形 告别background-image

摘要HTML5+CSS5制作网页,这是互联网生态趋势。小拼的博客用的就是H5和CSS3响应式布局,PC、移动都兼容,一站多用。推荐CSS3制作导航三角形,实际效果可见本站导航,下拉中的三角形可是纯CSS的。

在网页制作中,特别是导航菜单中,需要用到上下左右方向的三角形,这个时候我们就需要用PS制作小图片,然后CSS中用background-image:url(img/x.png)来控制,现在小拼推荐纯CSS3方法来制作三角形,自定义方向、颜色、尺寸,非常方便。

css3制作三角形 告别background-image

  1. /* css3三角形(向上 ▲) */
  2. div.arrow-up {
  3.   width:0px;
  4.   height:0px;
  5.   border-left:5px solid transparent;  /* 右透明 */
  6.   border-right:5px solid transparent/*右透明 */
  7.   border-bottom:5px solid #2f2f2f/* 定义底部颜色 */
  8.   font-size:0px;
  9.   line-height:0px;
  10. }
  11. /* css3三角形(向下 ▼) */
  12. div.arrow-down {
  13.   width:0px;
  14.   height:0px;
  15.   border-left:5px solid transparent;
  16.   border-right:5px solid transparent;
  17.   border-top:5px solid #2f2f2f;
  18.   font-size:0px;
  19.   line-height:0px;
  20. }
  21. /* css3三角形(向左) */
  22. div.arrow-left {
  23.   width:0px;
  24.   height:0px;
  25.   border-bottom:5px solid transparent;  /* left arrow slant */
  26.   border-top:5px solid transparent/* right arrow slant */
  27.   border-right:5px solid #2f2f2f/* bottom, add background color here */
  28.   font-size:0px;
  29.   line-height:0px;
  30. }
  31. /* css3三角形(向右) */
  32. div.arrow-rightright {
  33.   width:0px;
  34.   height:0px;
  35.   border-bottom:5px solid transparent;  /* left arrow slant */
  36.   border-top:5px solid transparent/* right arrow slant */
  37.   border-left:5px solid #2f2f2f/* bottom, add background color here */
  38.   font-size:0px;
  39.   line-height:0px;
  40. }

给我留言

图片 表情