CSS3-對話方塊圖形
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>after和before生成小三角</title> <style> body{ /*background: #000000;*/ } .tooltips{ width: 120px; height: 40px; background: #fbfbfb; border: 1px solid #ddd; border-radius: 5px; position: relative; } .tooltips:before{ position:absolute; width: 0; height: 0; border-bottom: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid transparent; border-left: 9px solid #d5d5d5; right: -19px; top: 10px; content: ""; } .tooltips:after{ position:absolute; width: 0; height: 0; border-bottom: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid transparent; border-left: 9px solid #fbfbfb; right: -18px; top: 10px; content: ""; } </style> </head> <body style="margin: 200px;"> <div class="tooltips"> </div> </body> </html>