卡卡網(wǎng)

微信對(duì)話(huà)框如何實(shí)現(xiàn)？其實(shí)CSS便可輕松實(shí)現(xiàn)，只需用到偽元素:before和:after，代碼量很少，且不高深，本文給大家介紹一下。

demodownload

HTML代碼

<div class="left">
  <p>卡卡測(cè)速網(wǎng)的網(wǎng)址是什么？</p>
</div>
<div class="right">
  <p>webkaka.com</p>
</div>

HTML代碼結(jié)構(gòu)很簡(jiǎn)單，一個(gè)對(duì)話(huà)框一個(gè)div，一個(gè)在左class="left"，一個(gè)在右class="right"。

CSS代碼

.left,.right {
    min-height: 40px;
    position: relative;
    display: table;
    text-align: center;
    border-radius: 7px;
}

.left {
    background-color: #fff;
}

.right {
    background-color: #9EEA6A;
}

.right {
 /*使左右的對(duì)話(huà)框分開(kāi)*/
    top: 40px;
    left: 60px;
}

.left > p,.right > p {
 /*使內(nèi)容居中*/
    display: table-cell;
    vertical-align: middle;
    padding: 0 10px;
}

.left:before,.right:after {
 /*用偽類(lèi)寫(xiě)出小三角形*/
    content: '';
    display: block;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    position: absolute;
    top: 11px;
}
/*分別給左右兩邊的小三角形定位*/
.left:before {
    border-right: 8px solid #fff;
    left: -16px;
}

.right:after {
    border-left: 8px solid #9EEA6A;
    right: -16px;
}

:after和:before的屬性border，是設(shè)置三角形的高度，border-left和border-right屬性，是設(shè)置三角形的方向及長(zhǎng)度。

通過(guò)三角形和方框的大小、方向、定位的調(diào)整，便可呈現(xiàn)對(duì)話(huà)框的樣子。

總結(jié)

本文通過(guò)使用CSS偽元素:before和:after，便可輕松實(shí)現(xiàn)仿微信對(duì)話(huà)框。

相關(guān)文章

• CSS偽元素:before和:after實(shí)現(xiàn)各種方向及大小的三角形箭頭
• CSS隱藏元素的10種方法之：使用::after偽元素
• 弄清這兩點(diǎn)，你就知道偽元素與偽類(lèi)的不同及使用區(qū)別了
• 純CSS偽元素創(chuàng)建的84個(gè)小圖標(biāo)
• 漂亮的偽元素CSS按鈕5個(gè)實(shí)例代碼

標(biāo)簽: after偽元素  before偽元素  偽元素