css如何实现三角形

css实现三角形

将一个div的宽度和高度设置为0，然后设置边框样式

div{width: 0;height: 0;border-top: 50px solid yellow;border-right: 50px solid yellowgreen;border-bottom: 50px solid greenyellow;border-left: 50px solid cornflowerblue;}

将下边框的长度设置为0，实现一个最小空间的三角形

div{ width: 0; height: 0; border: 50px solid transparent; /* border-top-color: cornflowerblue ; */ border-bottom: 50px solid greenyellow;}

上面产生的三角形，实质上占位还是一个正方形，所以应该将这个三角形占用的空间尽可能缩小，不设置下边框。

div{width: 0;height: 0;border-bottom: 50px solid coral;/* border-right: 100px solid cornflowerblue;border-left: 100px solid cadetblue; */border-right: 100px solid transparent;border-left: 100px solid transparent;}