卡卡網(wǎng)

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

demodownload

HTML代碼

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

HTML代碼結構很簡單，一個對話框一個div，一個在左class="left"，一個在右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 {
 /*使左右的對話框分開*/
    top: 40px;
    left: 60px;
}

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

.left:before,.right:after {
 /*用偽類寫出小三角形*/
    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，是設置三角形的高度，border-left和border-right屬性，是設置三角形的方向及長度。

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

總結

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

相關文章

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

標簽: after偽元素  before偽元素  偽元素