用CSS3實現帶小三角形的div框(不用圖片)

現在看到了很多帶小三角形的方框，如微信、Mac版的QQ、QQ空間的時間軸等等，在聊天或者是發表的狀態的內容外面都有一個帶小三角形的矩形框包圍着，感覺看着很不錯，於是決定親自動手寫一個，我上次用的是偏移背景圖片法，那么今天就不用圖片，用CSS3實現一下，下面我們來看一下實現代碼。

首先我們來看一下CSS3實現三角形原理：其實就是對於transparent的應用

假如html代碼是這樣的

<div class="arrow-up">
     <!--向上的三角-->
</div>
<div class="arrow-down">
    <!--向下的三角-->
</div>
<div class="arrow-left">
    <!--向左的三角-->
</div>
<div class="arrow-right">
    <!--向右的三角-->
</div>

下面用CSS3分別實現向上、下、左、右的三角形

/*箭頭向上*/
.arrow-up {
    width:0; 
    height:0; 
    border-left:30px solid transparent;
    border-right:30px solid transparent;
    border-bottom:30px solid #fff;
}
    
 /*箭頭向下*/
.arrow-down {
    width:0; 
    height:0; 
    border-left:20px solid transparent;
    border-right:20px solid transparent;
    border-top:20px solid #0066cc;
}
    
 /*箭頭向左*/
.arrow-left {
    width:0; 
    height:0; 
    border-top:30px solid transparent;
    border-bottom:30px solid transparent; 
    border-right:30px solid yellow; 
}
   
/*箭頭向右*/
.arrow-right {
    width:0; 
    height:0; 
    border-top:50px solid transparent;
    border-bottom: 50px solid transparent;
    border-left: 50px solid green;
}

ok代碼整理在一起后，效果大概是這樣的：

 

好了原理我們了解了，那么我們就實戰一下吧，來實現帶小三角形的div框。

 

首先，寫出html代碼：

<div class="entry">
    <div class="entry-trangle"><!--本Div只來實現三角形，無其他作用--></div>
    hello，我出生了<br/>
    hello，我出生了<br/>
    hello，我出生了<br/>
    hello，我出生了<br/>
</div>

掛載有類"entry-trangle"的div只用來實現小三角形。對這個div用css3的transparent實現三角形，然后絕對定位、設置z-index:-1;、margin-left:-19px;，看下面css代碼：

<style type="text/css">
    *{margin:0;padding:0;}
    body{
        background:#666;
        font:14px/20px "Microsoft YaHei";
    }
    .entry{
        margin:0 auto;
        margin-top:20px;
        width:280px;            
        background:#fff;
        padding:10px;
   
        /*設置圓角*/
        -webkit-border-radius:5px;
        -moz-border-radius:5px;
        border-radius:5px;
    }
    .entry-trangle{
        position:absolute;
        margin-left:-19px;
        width:0;
        height:0;
        border-top:10px solid transparent;
        border-bottom:10px solid transparent;
        border-right:10px solid #fff;
        z-index:-1;
    }
</style>

border-radius:5px;用來實現圓角；絕對定位、z-index:-1;的目的都是使控制小三角形的div在最底層，不影響父級div里面的內容布局。

好了，我們已經完工了，這是