<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <style> div { width: 200px; height: 100px; margin: 30px; background-color: orange; position: relative; } .box1:before { content: ''; position: absolute; width: 0; height: 0; left: 50%; top: 100%; border: solid transparent; border-width: 30px; margin-left: -30px; border-top-color: orange; } .box2:before { content: ''; position: absolute; width: 60px; height: 60px; top: 100%; left: 50%; margin-left: -30px; background: linear-gradient(45deg, transparent 0, transparent 50%, orange 50%, orange 50%, orange 100%) left top / 50% 50% no-repeat, linear-gradient(315deg, transparent 0, transparent 50%, orange 50%, orange 50%, orange 100%) right top / 50% 50% no-repeat; } </style> <body> <h3>css指示箭頭兩種實現方法：</h3> <h5>1、通過border屬性實現（兼容至IE9）, 參考網站：<a href="http://www.cssarrowplease.com/" target="_blank">http://www.cssarrowplease.com/</a></h5> <div class="box1"></div> <h5 style="margin-top: 100px;">2、通過background-image屬性的線性漸變函數實現（兼容至IE10）</h5> <div class="box2"></div> </body> </html>
