用css创建三角形

原理

设置一个div宽高都为0，通过border来控制这个div的大小。然后将其中几个边background设置为transparent，即可得到三角形

实现

1
<div class='triangle'></div>
1
.triangle{
2
      width: 0;
3
      height: 0;
4
      background-color: #fff;
5
      border-right: 100px solid transparent;
6
      border-left: 100px solid transparent;
7
      border-top: 100px solid rgb(131,194,177);
8
      border-bottom: 100px solid transparent;
9
}
CSS
样式

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！