CSS3實現空心、實心三角指示箭頭（利用border的設定實現）
阿新 • • 發佈：2019-01-11
（一）三角形實現原理
（1）三角形的實現原理是寬高都不設定（即為0），只設置邊框，如果四個邊框都設定寬度（border-width）、樣式（border-style）和顏色（border-color）。 （2）當四個邊框的寬度形同的時候
- 效果圖如下
- html結構
<div class="box-width-equal">邊框的寬度相同</div>- css樣式
.box-width-equal{ width: 400px; height: 400px; margin: 10px auto; position: relative; } .box-width-equal::before{ content: ''; position: absolute; border-left: 200px solid orange; border-top: 200px solid red; border-bottom: 200px solid orchid; border-right: 200px solid bisque; }
（3）當四個邊框的寬度不相同的時候
- 效果圖如下
- html結構
<div class="box-width-unEqual">邊框的不寬度相同</div>- css樣式
.box-width-unEqual{ width: 400px; height: 400px; margin: 10px auto; position: relative; } .box-width-unEqual::before{ content: ''; position: absolute; border-left: 250px solid orange; border-top: 120px solid red; border-bottom: 280px solid orchid; border-right: 150px solid bisque; }
（二）兩個三角形重疊時，高度偏移量的實現原理
（1）原理圖
（三）實心三角形（視覺上沒有邊框）
（1）效果圖（2）HTML結構
<body> <div class="dialog-noBorder">實心三角形（視覺上沒有邊框）</div> </body>
（3）CSS樣式* { margin: 0; padding: 0; } .dialog-noBorder { width: 300px; height: 150px; background: orchid; margin: 0 auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: relative; border: 10px solid orchid; /*此處的邊框大小會影響第二個三角形到頂部的偏移量，一般是1.4倍*/ } .dialog-noBorder::before { content: ''; position: absolute; top: 150px; left: 120px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid orchid; }
（四）空心三角形（視覺上有邊框）
（1）效果圖（2）HTML結構
<body> <div class="dialog-border">空心三角形（視覺上有邊框）</div> </body>
（3）CSS樣式.dialog-border { width: 300px; height: 150px; background: orchid; margin: 50px auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; position: relative; border: 10px solid red; /*此處的邊框大小會影響第二個三角形到頂部的偏移量，一般是1.4倍*/ } .dialog-border::before { content: ''; position: absolute; top: 150px; left: 120px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid red; } .dialog-border::after { content: ''; position: absolute; top: 136px; left: 120px; border-left: 30px solid transparent; border-right: 30px solid transparent; border-top: 30px solid orchid; }