原理是 给 元素 设置 position:relative;
然后给元素的:after , :before 设置显示样式 并 position:absolute
<div id="demo"></div> <style> #demo { width: 100px; height: 100px; background-color: #ccc; position: relative; border: 4px solid #333; } #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; left: 100%; position: absolute; width: 0; } #demo:after { border-width: 9px; border-left-color: #ccc; top: 15px; } #demo:before { border-width: 14px; border-left-color: #333; top: 10px; } </style>
************ 箭头向上 --------------
<div id="demo"></div> <style> #demo { width: 100px; height: 100px; margin-top:50px; background-color: #ccc; position: relative; border: 4px solid #333; } #demo:after, #demo:before { border: solid transparent; content: ' '; height: 0; position: absolute; width: 0; } #demo:after { border-width: 9px; border-bottom-color: #ccc; top: -18px; left:35px; } #demo:before { border-width: 14px; border-bottom-color: #333; left: 30px; top: -30px; } </style>