div+css做出帶三角的彈出框
阿新 • • 發佈：2019-01-23
notice：三角的那部分可以用圖片作為背景，但是容易出現雜邊。所以利用css中border做出三角形狀，原理是用border的形狀如下：
當我們設定content的寬高為0時，可想而知會出現什麼效果，如下：
然後把不保留的其他boder設定顏色為透明transparent就行了。具體程式碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ position: relative; padding-top: 8px; } .con{ width: 200px; height: 100px; border: 1px skyblue solid; border-radius: 3px; background-color: skyblue; } .con-ret{ border: 7px solid transparent; border-bottom-color:skyblue; position: absolute; left: 10px; top:-6px; } </style> </head> <body> <div class="box"> <div class="con-ret"></div> <div class="con"></div> </div> </body> </html>
實現的效果圖如下：
