源于生活

标题: 纯CSS实现的气泡三角符号特效代码 [打印本页]
作者: kevin-ying    时间: 2014-3-7 08:43
标题: 纯CSS实现的气泡三角符号特效代码
  1. <!DOCTYPE html>
  2.     <html>
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>纯CSS实现的气泡三角符号特效代码 http://www.kevin-ying.com</title>
  6.     <style>
  7.     .org_box{width:500px; height:80px; line-height:40px; margin:40px auto; padding-left:2em; background:#F3961C;font-size:12px; position:relative; }
  8.     .org_box_cor{ width:0; height:0; font-size:0;border-style:solid;overflow:hidden; position:absolute; }
  9.     .cor1{border-width:20px;border-color:#f3961c transparent transparent transparent;left:60px; bottom:-40px;}
  10.     .cor2{border-width:20px;border-color:transparent #f3961c transparent transparent;left:-40px; bottom:30px;}
  11.     .cor3{border-width:20px;border-color:transparent transparent #f3961c transparent;left:80px; top:-40px;}
  12.     .cor4{border-width:20px;border-color:transparent transparent transparent #f3961c;right:-40px; bottom:30px;}
  13.     .cor5{border-width:20px 10px;border-color:#f3961c #f3961c transparent transparent;left:60px; bottom:-40px;}
  14.     .cor6{border-width:20px 10px;border-color:#f3961c transparent #f00 transparent;left:-40px; bottom:30px;}
  15.     .cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}
  16.     .cor7{border-width:20px 10px;border-color:transparent #f3961c #f3961c transparent;left:80px; top:-40px;}
  17.     .box1{height:40px;background:#000;position:relative;}
  18.     .corner{width:0;height:0;font-size:0;border-width:20px 20px 20px;border-style:solid;border-color:#f00 transparent #f00 #f00  ;_border-color: #f00 white white white ;position:absolute;left:0;bottom:0;overflow:hidden;}
  19.     </style>
  20.     </head>
  21.     <body>
  22.     <div class="org_box"> <span class="org_box_cor cor1"></span>上边框有颜色,所以箭头冲下,定位的负值是边框宽度的2倍，宽度只有一个值，是等边三角形.要专门给IE6写HACK，将对应的transparent改为white.（以下省略这句描述）。 </div>
  23.     <div class="org_box"> <span class="org_box_cor cor2"></span>右边框有颜色值,所以箭头冲左 </div>
  24.     <div class="org_box"> <span class="org_box_cor cor3"></span>下边框有颜色,所以箭头冲上</div>
  25.     <div class="org_box"> <span class="org_box_cor cor4"></span>左边框有颜色,所以箭头冲右 </div>
  26.     <div class="org_box"> <span class="org_box_cor cor5"></span>上，右有颜色值，（宽度有两个值且不等，大家可以任意排列组合，图案很丰富） </div>
  27.     <div class="org_box"> <span class="org_box_cor cor6"></span>上，下颜色值（颜色值不一样，有惊喜,沙漏？高脚杯）</div>
  28.     <div class="org_box"> <span class="org_box_cor cor7"></span>右下有颜色值</div>
  29.     <p style="color:#f00;">三个颜色值，有时也能用上,同样，改变颜色值顺序，开口方向不同。</p>
  30.     <div class="box1"><em class="corner"></em>地方了宋德福</div>
  31.     </body>
  32.     </html>
复制代码






欢迎光临 源于生活 (http://bbs.vingoo.info/) Powered by Discuz! X3.1