具体实现
<!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); 即可使箭头朝向改变。