用CSS製作聊天框小尖角、氣泡效果

常常看到這樣的尖角，以前不懂，以為都是用圖片做出來的，後來驚奇的發現，原來很多都是用CSS做出來的，既美觀又節省資源，真是兩全其美啊！

那麼，用CSS怎麼達成這種效果呢？首先，來寫一個簡單的程式碼：

程式碼如下:

<p class="arrow"></p>
<style type="text/css">
.arrow {    
width:0;    
height:0;
    
font-size:0;
border:solid 10px #000;
}</style>

這兒，我們可以得到一個黑色的正方形，其實這是邊框組成的，因為p的寬度和高度都是0,。那麼，我們具體來看看，p寬度和高度都是0時，它的上下左右四邊框都是怎樣的，下面我們把邊框的各邊顏色分別設定為不同顏色：

程式碼如下:

<p class="arrow"></p>
<style type="text/css">
.arrow {
    width:0;
    height:0;
    font-size:0;
    border:solid 10px;
    
border-color
:#f00 #0f0 #00f #000;
}
</style>

我們發現，原來當p的寬度和高度都是0的時候，它的整個邊框是由四個三角形組成的，每一邊為一個三角形，那麼我們就可以利用這個特點，來做可愛的小尖角了。我們只要把不需要的三邊的邊框（三角形）的顏色設定為與背景相同即可，這樣就只能看到你想要的那個三角形了，然後再利用定位調整一下位置就可以了。具體程式碼如下所示：

程式碼如下:

<p class="s
end
">
    <p class="arrow"></p>
</p>
<style type="text/css">
body {
    
background
:#4D4948;
}
.send {
    
position:relative;
    width:150px;
    height:35px;
    background:#F8C301;
    border-radius:5px; /* 圆角 */
    
margin:30px auto 0;
}
.send .arrow {
position:absolute;
    
top:5px;
right:-16px; /* 圆角的位置需要细心
调试
哦 */
    width:0;
    height:0;
    font-size:0;
    border:solid 8px;
    border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>

大功告成，效果如下圖：

【相關推薦】

1. CSS3免費影片教學

2. 瀏覽器實現行動裝置高效能css3動畫

3. #h5 +css3實作圖片飛入與淡入淡出效果的程式碼實例

4. 教你使用CSS3製作8種Loading動畫

5.教你用CSS畫標準的圓形圖案

#

以上是用CSS製作聊天框小尖角、氣泡效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！