如下图：左侧三角形

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绘制基础的对话框图案的代码示例】相关文章：

★ 用CSS3编程模仿iPhone中的返回按钮

★ CSS 面包屑导航栏2个例子

★ CSS基础教程: CSS的属性缩写

★ CSS分页符代码

★ CSS3实现的炫酷菜单代码分享

★ CSS 平级和儿子级样式写法示例

★ CSS中基代码base.css一览

★ 谈CSS的标准和最佳示例-Div+CSS教程

★ CSS自动控制图片大小的代码

★ CSS 3实现DIV圆角效果完整代码