怎么用CSS實現(xiàn)基礎(chǔ)的對話框圖案

這篇文章主要講解了“怎么用CSS實現(xiàn)基礎(chǔ)的對話框圖案”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用CSS實現(xiàn)基礎(chǔ)的對話框圖案”吧！

如下圖：左側(cè)三角形

css代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板

1. #talkbubble {   

2.     margin-left:30px;   

3.    width: 120px;    

4.    height: 80px;    

5.    background: red;   

6.    position: relative;   

7.    -moz-border-radius:    10px;    

8.    -webkit-border-radius: 10px;    

9.    border-radius:         10px;   

10. }   

11. #talkbubble:before {   

12.    content:"";   

13.    position: absolute;   

14.    rightright: 100%;   

15.    top: 26px;   

16.    width: 0;   

17.    height: 0;   

18.    border-top: 13px solid transparent;   

19.    border-right: 26px solid red;   

20.    border-bottom: 13px solid transparent;   

21. }  

其實，本案例的精華就是三角形的繪制，那么如何繪制三角形呢？我在這里總結(jié)一下！

上三角形，上三角形，頂部是尖的，所以用border-left，border-right，和border-bottom可以實現(xiàn)，給bottom一個顏色，其他設(shè)置為transparent

CSS Code復(fù)制內(nèi)容到剪貼板

1. #triangle-up {   

2.     width: 0;   

3.     height: 0;   

4.     border-left: 50px solid transparent;   

5.     border-right: 50px solid transparent;   

6.     border-bottom: 100px solid red;   

7. }  

同理，大家可以判斷一下如下代碼分別是什么樣的三角形！

CSS Code復(fù)制內(nèi)容到剪貼板

1. #triangle-down {   

2.     width: 0;   

3.     height: 0;   

4.     border-left: 50px solid transparent;   

5.     border-right: 50px solid transparent;   

6.     border-top: 100px solid red;   

7. }    

8.   

9. #triangle-left {   

10.     width: 0;   

11.     height: 0;   

12.     border-top: 50px solid transparent;   

13.     border-right: 100px solid red;   

14.     border-bottom: 50px solid transparent;   

15. }   

16.   

17.  #triangle-rightright {   

18.     width: 0;   

19.     height: 0;   

20.     border-top: 50px solid transparent;   

21.     border-left: 100px solid red;   

22.     border-bottom: 50px solid transparent;   

23. }    

24.   

25. #triangle-topleft {   

26.     width: 0;   

27.     height: 0;   

28.     border-top: 100px solid red;    

29.     border-right: 100px solid transparent;             

30. }   

31. #triangle-topright {   

32.     width: 0;   

33.     height: 0;   

34.     border-top: 100px solid red;    

35.     border-left: 100px solid transparent;   

36. }   

37. #triangle-bottomleft {   

38.     width: 0;   

39.     height: 0;   

40.     border-bottom: 100px solid red;    

41.     border-right: 100px solid transparent;     

42. }     

43.   

44. #triangle-bottomright {   

45.     width: 0;   

46.     height: 0;   

47.     border-bottom: 100px solid red;    

48.     border-left: 100px solid transparent;   

49. }  

判斷出上面代碼分別代表什么三角形嗎？沒錯，我的命名是根據(jù)三角形的方向來的。大家可以試一下。三角形會寫了，那么對話框就迎刃而解了！ 不管是左側(cè)的，還是上面的，只要改變一下before偽類的定位，就可以實現(xiàn)了。

當(dāng)然，三角形的寫法是很基礎(chǔ)的。你也可以用css繪制出五角星、六角星、多邊形、愛心等等。當(dāng)然有些符號是不常用的，用的最多的還是三角形。

感謝各位的閱讀，以上就是“怎么用CSS實現(xiàn)基礎(chǔ)的對話框圖案”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用CSS實現(xiàn)基礎(chǔ)的對話框圖案這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！