3.CSS绘制 三角形、梯形、六边形

利用CSS的标准盒子/怪异盒子（IE盒子模型）和border属性

三角形

  width: 100px;
  height: 100px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid red;
  box-sizing: border-box;

梯形

  width: 100px;
  height: 100px;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-left: 1px solid transparent;
  border-right: 1px solid red;

六边形

利用正方型 + 伪类（左右两个梯形）

  .content {
    width: 300px;
    height: 300px;
    background-color:red;
  }
  .content::after {
    width: 100px;
    height: 100px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid red;
  }
  .content::before {
    width: 100px;
    height: 100px;
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
    border-right: 1px solid transparent;
    border-left: 1px solid red;
  }