CSS pseudo-class to make triangles

 .content{
    width: 300px;
    height: 50px;
    position: relative; //The created small triangle pseudo-class should be positioned with
    it.content:after{
      content:"";
      position: absolute;
      left: 150px;
      bottom: - 10px;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 10px 10px 0 10px; // top, right, bottom, left which direction the triangle is facing, which direction has a width of 0
      border-color: red transparent transparent transparent; //Which direction is the upper, right, lower, and left triangle facing, and the direction opposite to this direction is colored
    }
  }