利用纯css创建一个三角形

网页中对话气泡框下边的小三角是非常有用的制的方法很多想什么字体图标小图片之类的都可以，但是都不够灵活和快捷，有了之绘制一个三角形就非常简单了利用纯创一三角形首先当然是一个任意的空标签来当小三角，下边的丢去即可：代码如:.triangle{left:50%;margin-left:-5px;background:#fafafa;bottom:-4px;-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);-o-transform:rotate(45deg);border:1pxsolidborder-top:none;border-left:none}代码利用的2d旋转属性对正方形进旋转且隐藏掉顶部左右两边的边框就可以实现小三角了。例子代码如:html><metacharset=utf-8><scripttype=text/javascript<title>三种纯实现三角形的&<link<styletype=text/css>{padding:8pxbackground:#fcea9e;#b6bac0;font:normal16px}h1{float:left;}{font-weight:bold;color:#222;}.return-article{float:right;}.return-articledisplay:inline;}拟tips*/{position:relative;float:left;00width:240px;

height:60px;line-height:60px;2pxborder:1pxsolid#c9e9c0;}.triangle-border{position:absolute;left:30px;height:0;border-style:soliddasheddasheddashed;}{border-color:#c9e9c0transparent}.tb-background{}/*字符模拟tips*/.triangle-character{position:absolute;left:30px;height:26px;font:normal26px宋;}.tc-background{bottom:-12px;}.tc-border{color:#c9e9c0;}/*css3模拟tips*/{bottom:-8px;bottom:-6px;overflow:hidden;height:13px;border-right:1px#c9e9c0;}.transform{-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);}{m12=-0.7071067811865477,m21=0.7071067811865477,m22=0.7071067811865475,sizingmethod='autoprogid:dximagetransform.microsoft.matrix(m11=0.7071067811865475,m12=-0.7071067811865477,m21=0.7071067811865477,m22=0.7071067811865475,sizingmethod='autoexpand');}</style></head><body><divclass=message-box><span>我利用属实现&<divtb-border></div><divtb-background></div></div><divclass=message-box><span>我利用◆字实&<divclass=triangle-charactertc-border></div><divclass=triangle-charactertc-background>◆</div><divclass=message-box><span>我利用css属实现的&<