要点 ## 用纯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>