用css3製作一個帶小尖角的氣泡對話方塊
阿新 • • 發佈：2019-01-29
感謝css3的技術發展，現在一些純形狀類的影象可以不用切成一張圖片，而是可以用css3來繪製出一樣的圖形。
因為這是我第一天上班主管給我的小任務，所以對它有點小感情，想要把它寫在部落格上。
1、矩形對話方塊
2、用三角形做小尖角
完整程式碼如下
<!DOCTYPE html> <html> <head> <title>test</title> <meta charset="utf-8"> </head> <style type="text/css"> .frame{ width: 200px; height: 50px; border:1px solid #000; border-radius: 10px; position: relative; } .triangle{ width: 20px; height: 20px; display: inline-block; position: absolute; bottom: -12px; right: 30px; background-color: #fff; border-top: 1px solid #000; border-left: 1px solid #000; transform:rotate(225deg); -ms-transform:rotate(225deg); /* IE 9 */ -moz-transform:rotate(225deg); /* Firefox */ -webkit-transform:rotate(225deg); /* Safari 和 Chrome */ -o-transform:rotate(225deg); /* Opera */ } </style> <body> <div class="frame"> <span class="triangle"></span> </div> </body> </html>