首页 > Web开发 > 详细

用纯CSS实现的箭头

时间:2015-07-19 17:44:53      阅读:261      评论:0      收藏:0      [点我收藏+]

原理非常简单,通过截取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>

用纯CSS实现的箭头

原文:http://www.cnblogs.com/huangcan/p/4658789.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!