您的位置： 首页 >日志>前端技术>详细内容

前端技术

【转】Tip中小三角的实现

来源：本站原创 发布时间：2011-09-26 16:46:37 浏览次数： 次 【字体：小 大】

 

前段时间专门研究了一下腾讯微博的Tip，很有意思！tip中的小箭头是用“◆”（encode为：◆）字符模拟的。以前也写过类似的实现方案《用css的border属性实现三角》。用“◆”字符模拟小三角有一个有点就是：比如tip有border时，也可以用两个绝对定位的“◆”字符模拟。如图：

注意：最好根据您的实际情况设置“◆”的字体，我这里用了宋体，有棱有角真好！

demo页面：

 

 

用css的border属性实现三角

 

 

 

今天啄米鸟给我了一个冰剑的《em实现倒三角的提示效果》。仔细琢磨了一下运用的还是很巧妙的，在现实的前端开发中也很有用，至少可以减小图片的字节。

先看看应用实例吧：

11

实现的原来就是：在一个宽高为0像素的块状元素中设置border属性，例如

  1. .box{ 
  2. width:0px; 
  3. height:0; 
  4. border-bottom:50px #F00 solid; 
  5. border-left:50px #03F solid; 
  6. border-right: 50px #F90 solid; 
  7. border-top:50px #6C0 solid; 
  8. } 

在浏览器中的显示如图：

2009-09-14_225923

点击查看demo：

这样就有上下左右四个三角形了，再把除了要用的三角外的其他3个三角（border）颜色设置为背景色就ok了。

例如这样就能得到一个颜色为#CCC的向上的三角：

  1. .to-top{ 
  2.  
  3. display:block; 
  4.  
  5. overflow:hidden; 
  6.  
  7. width:0px; 
  8.  
  9. height:0px; 
  10.  
  11. border:6px solid #ccc; 
  12.  
  13. border-color:#ccc #fff; 
  14.  
  15. border-width:0 6px 6px 6px; 
  16.  
  17. } 

更多的实例请点击查看demo：

 

转载请注明转自《Tip中小三角的实现》与《用css的border属性实现三角》

×

用户登录