巧用css+特殊字符,实现三角形效果

<html>
 <head>
  <style>
   .org_box{
    height:80px;
    line-height:80px;
    margin-top:30px;
    padding-left:2em;
    background:#F3961C;
    position:relative;
   }
   .org_bot_cor_2{
    height:30px;
    line-height:0;
    font-size:60px;
    color:#f3961c;
    position:absolute;
    left:50%;
    top:3px;
   }
  </style>
 </head>
 <body>
  <div class="org_box">
   <span class="org_bot_cor_2">◆</span>
   字符法实现底部90度尖角对话框
  </div>
 </body>
</html>

效果如下:

巧用css+特殊字符,实现三角形效果_第1张图片

<html>
 <head>
  <style>
   .org_box{
    height:80px;
    line-height:80px;
    margin-bottom:30px;
    padding-left:2em;
    background:#F3961C;
    position:relative;
   }
   .org_bot_cor_2{
    height:30px;
    line-height:0;
    font-size:60px;
    color:#f3961c;
    position:absolute;
    left:60px;
    bottom:-25px;
   }
  </style>
 </head>
 <body>
  <div class="org_box">
   <span class="org_bot_cor_2">◆</span>
   字符法实现底部90度尖角对话框
  </div>
 </body>
</html>

效果如下:

 

更多内容参照:

http://www.jb51.net/css/33743.html

http://www.zhangxinxu.com/wordpress/2010/05/css-border%E4%B8%89%E8%A7%92%E3%80%81%E5%9C%86%E8%A7%92%E5%9B%BE%E5%BD%A2%E7%94%9F%E6%88%90%E6%8A%80%E6%9C%AF%E7%AE%80%E4%BB%8B/

你可能感兴趣的:(巧用css+特殊字符,实现三角形效果)