這篇文章主要講解了“怎么用CSS實(shí)現(xiàn)基礎(chǔ)的對(duì)話框圖案”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么用CSS實(shí)現(xiàn)基礎(chǔ)的對(duì)話框圖案”吧！
我們提供的服務(wù)有：網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、微信公眾號(hào)開(kāi)發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、華安ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問(wèn)題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的華安網(wǎng)站制作公司
如下圖：左側(cè)三角形
css代碼如下：
CSS Code復(fù)制內(nèi)容到剪貼板
#talkbubble {
margin-left:30px;
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
rightright: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
其實(shí)，本案例的精華就是三角形的繪制，那么如何繪制三角形呢？我在這里總結(jié)一下！
上三角形，上三角形，頂部是尖的，所以用border-left，border-right，和border-bottom可以實(shí)現(xiàn)，給bottom一個(gè)顏色，其他設(shè)置為transparent
CSS Code復(fù)制內(nèi)容到剪貼板
#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
}
同理，大家可以判斷一下如下代碼分別是什么樣的三角形！
CSS Code復(fù)制內(nèi)容到剪貼板
#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;
}
#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-rightright {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;
}
#triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-topright {
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent;
}
#triangle-bottomleft {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;
}
#triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
判斷出上面代碼分別代表什么三角形嗎？沒(méi)錯(cuò)，我的命名是根據(jù)三角形的方向來(lái)的。大家可以試一下。三角形會(huì)寫了，那么對(duì)話框就迎刃而解了！ 不管是左側(cè)的，還是上面的，只要改變一下before偽類的定位，就可以實(shí)現(xiàn)了。
當(dāng)然，三角形的寫法是很基礎(chǔ)的。你也可以用css繪制出五角星、六角星、多邊形、愛(ài)心等等。當(dāng)然有些符號(hào)是不常用的，用的最多的還是三角形。
感謝各位的閱讀，以上就是“怎么用CSS實(shí)現(xiàn)基礎(chǔ)的對(duì)話框圖案”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么用CSS實(shí)現(xiàn)基礎(chǔ)的對(duì)話框圖案這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
