转载地址:http://corvine.diandian.com/post/2012-08-19/40036038981
利用 border 属性做的对话框小三角
四个角都有,存着慢慢用~
以后可以不用做三角形图片了 =v=
<!DOCTYPE html> <html> <head> <title>三角形对话框测试</title> <style type="text/css"> div.dialog-box { width: 400px; height: 200px; background-color: #C4D5AC; border: 1px solid #0F8055; position: relative; margin: 50px auto; } div.dialog-box div.top-triangle-border { width: 0; height: 0; border: 11px solid transparent; border-bottom: 11px solid #0F8055; position: absolute; top: -22px; right: 20px; } div.dialog-box div.top-triangle { width: 0; height: 0; border: 10px solid transparent; border-bottom: 10px solid #C4D5AC; position: absolute; top: -9px; right: -10px; } div.dialog-box div.right-triangle-border { width: 0; height: 0; border: 11px solid transparent; border-right: 11px solid #0F8055; position: absolute; top: 20px; left: -22px; } div.dialog-box div.right-triangle { width: 0; height: 0; border: 10px solid transparent; border-right: 10px solid #C4D5AC; position: absolute; top: -10px; left: -9px; } div.dialog-box div.bottom-triangle-border { width: 0; height: 0; border: 11px solid transparent; border-top: 11px solid #0F8055; position: absolute; bottom: -22px; left: 20px; } div.dialog-box div.bottom-triangle { width: 0; height: 0; border: 10px solid transparent; border-top: 10px solid #C4D5AC; position: absolute; bottom: -9px; left: -10px; } div.dialog-box div.left-triangle-border { width: 0; height: 0; border: 11px solid transparent; border-left: 11px solid #0F8055; position: absolute; bottom: 20px; right: -22px; } div.dialog-box div.left-triangle { width: 0; height: 0; border: 10px solid transparent; border-left: 10px solid #C4D5AC; position: absolute; bottom: -10px; right: -9px; } </style> </head> <body> <div class="dialog-box"> <div class="top-triangle-border"> <div class="top-triangle"></div> </div> <div class="right-triangle-border"> <div class="right-triangle"></div> </div> <div class="bottom-triangle-border"> <div class="bottom-triangle"></div> </div> <div class="left-triangle-border"> <div class="left-triangle"></div> </div> </div> </body> </html>
预览图: