CSS怎么實(shí)現(xiàn)聊天框小尖角和氣泡效果

本篇內(nèi)容主要講解“CSS怎么實(shí)現(xiàn)聊天框小尖角和氣泡效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“CSS怎么實(shí)現(xiàn)聊天框小尖角和氣泡效果”吧!

那么，用CSS怎么實(shí)現(xiàn)這種效果呢？首先，來寫一個(gè)簡單的代碼：

代碼如下:

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

這兒，我們可以得到一個(gè)黑色的正方形，其實(shí)這是邊框組成的，因?yàn)閐iv的寬度和高度都是0,。那么，我們具體來看看，div寬度和高度都是0時(shí)，它的上下左右四邊框都是怎樣的，下面我們把邊框的各邊顏色分別設(shè)置為不同顏色：

代碼如下:

<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>

我們發(fā)現(xiàn)，原來當(dāng)div的寬度和高度都是0的時(shí)候，它的整個(gè)邊框是由四個(gè)三角形組成的，每一邊為一個(gè)三角形，那么我們就可以利用這個(gè)特點(diǎn)，來做可愛的小尖角了。我們只要把不需要的三邊的邊框（三角形）的顏色設(shè)置為與背景相同即可，這樣就只能看到你想要的那個(gè)三角形了，然后再利用定位調(diào)整一下位置就可以了。具體代碼如下所示：

代碼如下:

<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; /* 圓角的位置需要細(xì)心調(diào)試哦 */
   width:0;
   height:0;
   font-size:0;
   border:solid 8px;
   border-color:#4D4948 #4D4948 #4D4948 #F8C301;
}
</style>

大功告成，效果如下圖：

到此，相信大家對(duì)“CSS怎么實(shí)現(xiàn)聊天框小尖角和氣泡效果”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！