css实现三角形和平形四边形

一、三角形

.father {
      width: 0px;
      height: 0px;
      border: 50px solid black;
    }

只设置border

.father {
      width: 0px;
      height: 0px;
      border-top: 50px solid black;
      border-right: 50px solid red;
      border-bottom: 50px solid green;
      border-left: 50px solid blue;
    }

设置四个border

// transparent 关键字表示一个完全透明的颜色，即该颜色看上去将是背景色
.father {
      width: 0px;
      height: 0px;
      border-top: 50px solid black;
      border-right: 50px solid transparent;
      border-bottom: 50px solid transparent;
      border-left: 50px solid transparent;
    }
.caret {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-top-color: black;
}

三角形

// 节省空间的三角形
.father {
      width: 0px;
      height: 0px;
      border-top: 50px solid black;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
    }

节省空间的三角形

// 等腰梯形
.father {
      width: 50px;
      height: 0px;
      border-top: 50px solid black;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
    }

等腰梯形

// 中空的图形
.father {
      width: 50px;
      height: 50px;
      border-top: 50px solid black;
      border-right: 50px solid red;
      border-bottom: 50px solid green;
      border-left: 50px solid blue;
    }

中空的图形

// 平形四边形



  
  
  


  

  

平形四边形

参考：https://www.jianshu.com/p/1f32120a503b