分类  编程技巧    关键字  Html5    发布  newghost   2014-03-21 
注意 转载须保留原文链接，译文链接，作者译者等信息。  

用CSS即可绘制出各种箭头，无需裁剪图片，甚至没有用到CSS3的东西。对浏览器支持良好。

基本原理

原理非常简单，通过截取border(边框)的部分“拐角”实现，几行CSS代码即可理解：

一个梯形

当元素宽、高和边框的宽相近（等）时，改变某一边的颜色可以看到一个梯形；

<div id="demo11"></div><style>
#demo11 {border: 10px solid #000;border-left-color: #f00;width: 10px;height: 10px;
}
</style>

一个三角形

当元素宽、高为零，且其他边为透明颜色时，可以形一个三角形。

<div id="demo12"></div><style>
#demo12 {border: 10px solid #000;border-left-color: #f00;width: 0;height: 0;
}
</style>

任意角度的三角形

改变各个边的宽度，即通过调整“边框”厚度可以配置出任意角度

<div id="demo14"></div><style>
#demo14 {border: 10px solid transparent;border-left: 20px solid #f00;width: 0;height: 0px;
}
</style>

通过伪元素实现

三角形可以通过伪元素绘制出，而无需改变原来的DOM结构

文字内容

<span id="demo15">文字内容</span><style>
#demo15{position: relative;
}
#demo15:after {border: 10px solid transparent;border-left: 10px solid #f00;width: 0;height: 0;position: absolute;content: ' '
}
</style>

伪元素实现三角线箭头

通过伪元素绘制出的两个，一个与背景色相同覆盖部分红色箭头，形成三角线

文字内容

<span id="demo15">文字内容</span><style>
#demo16{position: relative;
}
#demo16:after, #demo16:before {border: 10px solid transparent;border-left: 10px solid #fff;width: 0;height: 0;position: absolute;top: 0;right: -20px;content: ' '
}#demo16:before {border-left-color: #f00;right: -21px;
}
</style>

三角线分割的Tab页

• 文字内容 Tab1
• 文字内容 Tab2
• 文字内容 Tab3

<ul id="demo17"><li>文字内容 Tab1</li><li>文字内容 Tab2</li><li>文字内容 Tab3</li>
</ul><style>
#demo17{font-size: 10px;height: 24px;
}#demo17 li {float: left;position: relative;list-style: none;margin: 0 20px 12px -19px;border-top: solid 1px #ddd;border-bottom: solid 1px #ddd;padding-left: 12px;
}#demo17 li:after, #demo17 li:before {border: 10px solid transparent;border-left: 10px solid #fff;width: 0;height: 0;position: absolute;top: 0;right: -18px;content: ' '
}#demo17 li:before {border-left-color: #ddd;right: -19px;
}
</style>

三角形跟矩形组合成提示框

这里还有另一种效果，使用三角形跟矩形组合成提示框，代码来自这篇文章： Css arrows and shapes without markup

<div id="demo"></div><style>
#demo {width: 100px;height: 100px;background-color: #ccc;position: relative;border: 4px solid #333;
}#demo:after, #demo:before {border: solid transparent;content: ' ';height: 0;left: 100%;position: absolute;width: 0;
}#demo:after {border-width: 9px;border-left-color: #ccc;top: 15px;
}#demo:before {border-width: 14px;border-left-color: #333;top: 10px;
}
</style>

[ 非英文:359, 总字符:4335 ]

• 
  # 0  哑雀 2014-03-22 12:09:09
  这个技巧很不错
   回复
• 
  # 1  凡尘清心 2014-03-23 21:04:29
  很刁
   回复
• 
  # 2  bugknightyyp 2014-03-23 21:15:09
  goudiao
   回复
• 
  # 3  renren150743391 2014-03-24 07:23:29
  mark
   回复
• 
  # 4  Sima 2014-03-27 10:02:00
  高尚大啊
   回复
• 
  # 5  卫芒亚 2015-04-07 14:18:30

  好

   回复
• 
  # 6  车卫产 2016-02-23 14:24:34

  good

   回复
• 
  # 7  母凶次 2016-06-02 18:25:10

  感谢 很棒

   回复
• 
  # 8  成厌切 2016-06-29 15:33:53

  非常棒 给赞

   回复
• 
  # 9  侯而本 2016-08-17 11:45:22

  咸鱼

   回复
• 
  # 10  孔勿杂 2016-09-19 10:22:06

  @哑雀 #0

  真心不错，就是自己不会写

   回复
• 
  # 11  你大爷 2017-01-17 13:45:16

  good

   回复
• 
  # 12  沈方奶 2017-02-14 16:51:33

  @bugknightyyp #21111

   回复
• 
  # 13  胡干丝 2017-06-16 17:18:00

  

   回复
• 
  # 14  黄纤未 2017-06-28 08:52:19

  厉害！

   回复
• 
  # 15  母乐子 2017-07-26 18:53:13

  牛了

   回复
• 
  # 16  姜决无 2017-08-14 16:34:25

  .

   回复
• 
  # 17  甘网毛3 2017-08-14 16:34:56

  .

   回复