具體實現
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>CSS實現帶陰影效果的三角形</title> <style> .box { position: relative; width: 600px; height: 400px; background: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 2px #ccc; } .box:after { position: absolute; display: inline-block; top: 380px; left: 300px; width: 0; height: 0px; content: ''; border-style: solid; border-width: 20px; border-color: #fff #fff transparent transparent; transform: rotate(135deg); box-shadow: 2px -2px 2px #ccc; } </style> </head> <body> <div class="box"> </div> </body> </html>
運行結果
注：
調整 transform: rotate(135deg); 即可使箭頭朝向改變。