CSS實現邊框佈局（百度前端筆試）
阿新 • • 發佈：2019-02-01
主要思想為：先實現大的正方形邊框，在邊框前實現黑底三角形，再覆蓋一個白底三角形。
主要用border-left-color實現三角形，left則三角形頂點向右，right則三角形頂點向左。
<!DOCTYPE html> <html> <head> <title>css佈局（凸三角正方形）</title> <meta charset="UTF-8"> <style type="text/css"> #demo{ position:relative; width:100px; height:100px; border:2px solid #000; background-color:#fff; } /*對於before和after前的冒號。CSS2為單冒號，CSS3為雙冒號，但IE9及以上才支援*/ #demo::before, #demo::after{ /*冒號要緊跟#demo後面*/ content:"";/*content屬性是必須的而且應該經常被應用。否則，偽元素無論如何都無法正常工作。單引號和雙引號都可以*/ position:absolute; left:100%; width:0px; height:0px; border:solid transparent; } #demo::before{ top:18px; border-width:12px; border-left-color:#000; } #demo::after{ top:20px; border-width:10px; border-left-color:#fff; } </style> </head> <body> <div id="demo"></div> </body> </html>