純CSS實現聊天框小尖角、氣泡效果
阿新 • • 發佈:2019-02-01
經常看到這樣的尖角,以前不懂,以為都是用圖片做出來的,後來驚奇的發現,原來很多都是用CSS做出來的,既美觀又節省資源,真是兩全其美啊!
這兒,我們可以得到一個黑色的正方形,其實這是邊框組成的,因為div的寬度和高度都是0,。那麼,我們具體來看看,div寬度和高度都是0時,它的上下左右四邊框都是怎樣的,下面我們把邊框的各邊顏色分別設定為不同顏色:
那麼,用CSS怎麼實現這種效果呢?首先,來寫一個簡單的程式碼:
<div class="arrow"></div>
<style type="text/css">
.arrow {
width:0;
height:0;
font-size:0;
border:solid 10px #000;
}</style>
這兒,我們可以得到一個黑色的正方形,其實這是邊框組成的,因為div的寬度和高度都是0,。那麼,我們具體來看看,div寬度和高度都是0時,它的上下左右四邊框都是怎樣的,下面我們把邊框的各邊顏色分別設定為不同顏色:
<div class="arrow"></div> <style type="text/css"> .arrow { width:0; height:0; font-size:0; border:solid 10px; border-color:#f00 #0f0 #00f #000; } </style>
我們發現,原來當div的寬度和高度都是0的時候,它的整個邊框是由四個三角形組成的,每一邊為一個三角形,那麼我們就可以利用這個特點,來做可愛的小尖角了。
我們只要把不需要的三邊的邊框(三角形)的顏色設定為與背景相同即可,這樣就只能看到你想要的那個三角形了,然後再利用定位調整一下位置就可以了。
具體程式碼如下所示:
<div class="send"> <div class="arrow"></div> </div> <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>
大功告成,效果如下圖: