您的位置:首页> 日志> 前端技术 正文
DTOP

【转】Tip中小三角的实现

浅蓝色_桀 | 2011年09月26日 |

>>收藏本文 已有 0条评论

 

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

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

demo页面:http://www.css88.com/demo/tipbox/

 

 

用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-right50px #F90 solid
  7. border-top:50px #6C0 solid

在浏览器中的显示如图:

2009-09-14_225923

点击查看demo:http://www.css88.com/demo/border/border1.html

这样就有上下左右四个三角形了,再把除了要用的三角外的其他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.  

更多的实例请点击查看demo:http://www.css88.com/demo/border/border.html

 

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