要點 ## 用純CSS創建一個三角形的原理是什么？ 把上、左、右三條邊隱藏掉（顏色設為 transparent） ``` #demo { width: 0; height: 0; border-width: 20px; border-style: solid; border-color: transparent transparent red transparent; } ``` > 1.內容為空，邊框顏色為transparent透明，再給其中一個邊顏色，就可顯示小三角 > 2.用偽類，不占用盒子本身的空間，也不影響其他元素 > border: 20px solid transparent; > border-left-color: #2dae2d; ~~~ <style> .box{ width: 500px; height: 100px; background: #2dae2d; margin: 200px; position: relative; } .box::after{ content: ""; border: 20px solid transparent; border-left-color: #2dae2d; position: absolute; top: 0px; right:-40px; }//用偽類元素做出小三角 .sanjiao{ width: 0px; height: 0px; background: #fff; margin: 200px; border-width: 100px; border-style: solid ; border-color: #2dae2d pink blue blueviolet; }//小三角的原理 </style> * * * * * <div class="box"> </div> <div class="sanjiao"> </div>