189 8069 5689

怎么用CSS实现基础的对话框图案

这篇文章主要讲解了“怎么用CSS实现基础的对话框图案”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS实现基础的对话框图案”吧！

我们提供的服务有：网站设计、网站建设、微信公众号开发、网站优化、网站认证、华安ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的华安网站制作公司

如下图：左侧三角形
怎么用CSS实现基础的对话框图案

css代码如下：

CSS Code复制内容到剪贴板

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

其实，本案例的精华就是三角形的绘制，那么如何绘制三角形呢？我在这里总结一下！

上三角形，上三角形，顶部是尖的，所以用border-left，border-right，和border-bottom可以实现，给bottom一个颜色，其他设置为transparent

CSS Code复制内容到剪贴板

  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复制内容到剪贴板

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

判断出上面代码分别代表什么三角形吗？没错，我的命名是根据三角形的方向来的。大家可以试一下。三角形会写了，那么对话框就迎刃而解了！ 不管是左侧的，还是上面的，只要改变一下before伪类的定位，就可以实现了。

当然，三角形的写法是很基础的。你也可以用css绘制出五角星、六角星、多边形、爱心等等。当然有些符号是不常用的，用的最多的还是三角形。

感谢各位的阅读，以上就是“怎么用CSS实现基础的对话框图案”的内容了，经过本文的学习后，相信大家对怎么用CSS实现基础的对话框图案这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


当前标题：怎么用CSS实现基础的对话框图案
当前网址：http://cdxtjz.cn/article/gschpi.html

其他资讯