實現一個普通邊框
<style> .border { width: 100px; height: 50px; border: 1px solid red; } </style> <div class="border"></div>
實現由四個三角形組成的正方形
<style> .triangle { width: 0; height: 0; border: 100px solid red; border-right-color: green; border-left-color: blue; border-top-color: black; } </style> <div class="triangle"></div>
三角形
<style> .triangle-bottom { width: 0; height: 0; border: 100px solid transparent; border-top-color: red; } </style> <div class="triangle-bottom"></div> 將左右下邊顏色設置為透明 transparent，得到向下的箭頭
將三角形放入邊框中
<style> .border-triangle { width: 100px; height: 50px; border: 1px solid red; position: relative; } .border-triangle:before { content: ""; position: absolute; width: 0; height: 0; border: 4px solid transparent; border-top-color: red; left: 50%; margin-left: -4px; bottom: -8px; } </style> <div class="border-triangle"></div> 將三角形設置為絕對定位，利用margin-left和left 定位到元素中間，bottom設置-8px，靠近邊框底部
電腦刺綉綉花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
遮住多余三角形
<style> .border-triangle-bottom { width: 100px; height: 30px; border: 1px solid #1d9cd6; position: relative; border-radius: 4px; } .border-triangle-bottom:after, .border-triangle-bottom:before { content: ""; position: absolute; width: 0; height: 0; border: 4px solid transparent; border-top-color: #1d9cd6; left: 50%; margin-left: -4px; bottom: -8px; } .border-triangle-bottom:after { border-top-color: #fff; bottom: -7px; } </style> <div class="border-triangle-bottom"></div> 將邊框顏色換成好看的藍色，將before和after偽元素都設置為絕對定位，定位到邊框底部劇中，將after偽元素設置成白色，底部偏移量大於before 1px，遮住三角形底部的顏色。這樣一個好看的箭頭邊框就實現了