决定转身就不要频频回头，酷的人才会被记得久一些。早安！没什么可懊恼的，能被拆散的，其实都不是属于你的，继续下一个吧。早安！
如下图：左侧三角形
css代码如下：
CSS Code复制内容到剪贴板
- #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:13pxsolidtransparent;
- border-right:26pxsolidred;
- border-bottom:13pxsolidtransparent;
- }
其实，本案例的精华就是三角形的绘制，那么如何绘制三角形呢？我在这里总结一下！
上三角形，上三角形，顶部是尖的，所以用border-left，border-right，和border-bottom可以实现，给bottom一个颜色，其他设置为transparent
CSS Code复制内容到剪贴板
- #triangle-up{
- width:0;
- height:0;
- border-left:50pxsolidtransparent;
- border-right:50pxsolidtransparent;
- border-bottom:100pxsolidred;
- }
同理，大家可以判断一下如下代码分别是什么样的三角形！
CSS Code复制内容到剪贴板
- #triangle-down{
- width:0;
- height:0;
- border-left:50pxsolidtransparent;
- border-right:50pxsolidtransparent;
- border-top:100pxsolidred;
- }
- #triangle-left{
- width:0;
- height:0;
- border-top:50pxsolidtransparent;
- border-right:100pxsolidred;
- border-bottom:50pxsolidtransparent;
- }
- #triangle-rightright{
- width:0;
- height:0;
- border-top:50pxsolidtransparent;
- border-left:100pxsolidred;
- border-bottom:50pxsolidtransparent;
- }
- #triangle-topleft{
- width:0;
- height:0;
- border-top:100pxsolidred;
- border-right:100pxsolidtransparent;
- }
- #triangle-topright{
- width:0;
- height:0;
- border-top:100pxsolidred;
- border-left:100pxsolidtransparent;
- }
- #triangle-bottomleft{
- width:0;
- height:0;
- border-bottom:100pxsolidred;
- border-right:100pxsolidtransparent;
- }
- #triangle-bottomright{
- width:0;
- height:0;
- border-bottom:100pxsolidred;
- border-left:100pxsolidtransparent;
- }
判断出上面代码分别代表什么三角形吗？没错，我的命名是根据三角形的方向来的。大家可以试一下。三角形会写了，那么对话框就迎刃而解了！ 不管是左侧的，还是上面的，只要改变一下before伪类的定位，就可以实现了。
当然，三角形的写法是很基础的。你也可以用css绘制出五角星、六角星、多边形、爱心等等。当然有些符号是不常用的，用的最多的还是三角形。
到此这篇关于如何使用CSS绘制基础的对话框图案的代码示例就介绍到这了。只要有价值，你遇到困难，遭受挫折，被人唾骂，被踩在脚下都不可怕，最可怕的是，你是张白纸。——送给坚持梦想中的人。更多相关如何使用CSS绘制基础的对话框图案的代码示例内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
