我们常见到界面中会出现三角形的对话框，今天我尝试用三种方法，做出了这种效果。 以下是实现的三种方式：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> #wrap1{ width:600px; height:40px; border:solid 2px brown; background-color:deeppink; border-radius:10px; position:relative; top:100px; text-align:center; line-height:40px; } .trian{ -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); -o-transform:rotate(45deg); transform:rotate(45deg); } .trian1{ position:absolute; left:50%; bottom:34px; width:13px; height:13px; background:deeppink; border-left:1px solid brown; border-top:1px solid brown; } #wrap2{ width:600px; height:40px; border:solid 1px #000000; background-color:pink; border-radius: 10px; position: relative; top:200px; text-align: center; line-height: 40px; } .tria1{ width:0px; height:0px; position:absolute; left:50%; border-width:16px; border-style:solid; } .tria2{ border-color:transparent transparent #000000 transparent; bottom:40px; } .tria3{ border-color:transparent transparent pink transparent; bottom:39px; } #wrap3{ position:relative; width:600px; height:40px; line-height:40px; background:palevioletred; border:1px solid purple; border-radius:4px; text-align:center; top:300px; color:purple; } .tria4{ position:absolute; left:50%; width:20px; height:20px; font:normal 26px "宋体"; } .tria5{ bottom:35px; color:purple; } .tria6{ bottom:34px; color:palevioletred; } </style> </head> <body> <div id="wrap1"> <span>这是用transform属性字符实现的</span> <div class="trian trian1"></div> </div> <div id="wrap2"> <span>这是用boder实现的</span> <div class="tria1 tria2"></div> <div class = "tria1 tria3"></div> </div> <div id="wrap3"> <span>这是利用“◆”实现的</span> <div class="tria4 tria5">◆</div> <div class = "tria4 tria6">◆</div> </div> </body> </html>以下是效果图：
这里我比较喜欢border的方法，其实单边框不是矩形
div{ width:20px; height:20px; border-style:solid; border-width:10px; border-color:red blueviolet yellow green; }效果图
当我们把div的宽和高变为零的时候，我们发现，会有这样的效果：
当我们把边框的颜色设置为透明transparent时，再调整相对位置，就可以达到我们想要的效果。
