CSS伪类制作三角形

 .content{
    width: 300px;
    height: 50px;
    position: relative;  //创建出来的小三角伪类要以它来定位
    .content:after{
      content:"";
      position: absolute;
      left: 150px;
      bottom: -10px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 10px 0 10px;  // 上、右、下、左  三角朝哪个方向，哪个方向的宽度为0
      border-color: red transparent transparent transparent;  //上、右、下、左   三角朝哪个方向，该方向相对的方向有颜色
    }
  }