1.通过transform创建三角形
.min-rag { width: 10px; height: 10px; background: #f234f2; transform: rotate(45deg); } .box { width: 50px; height: 17px; background: #fff; position: absolute; left: 13px; top: 5px; background: greenyellow; } <div class="min-rag"></div> <div class="box"></div>显示的效果：
2.设置盒子的content为宽高为0，设置边框的宽度时展示的样式为
.min-rag { width: 0; height: 0; border-top: 50px solid #deac45; border-right: 50px solid green; border-bottom: #eef123 50px solid; border-left: red 50px solid; /* border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; */ position: absolute; top: 45%; left: 45%; } <div class="min-rag"></div>呈现效果： 所以当我们需要什么3角形时就设置一条边的颜色，其他3条边的颜色设置为透明：
代码：
.min-rag { width: 0; height: 0; border-top: 50px solid #deac45; /* border-right: 50px solid green; border-bottom: #eef123 50px solid; border-left: red 50px solid; */ border-right: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid transparent; position: absolute; top: 45%; left: 45%; } <div class="min-rag"></div>效果： 总结：也可以设置2条边，例如如下代码 .min-rag { width: 0; height: 0; border-top: 50px solid #deac45; /* border-right: 50px solid green; border-bottom: #eef123 50px solid; border-left: red 50px solid; / border-right: 50px solid transparent; / border-bottom: 50px solid transparent; border-left: 50px solid transparent; */ position: absolute; top: 45%; left: 45%; }
效果图：
