Using the sketch of the border CSS

Draw a trapezoid

width:10px;
border-top:10px solid red;
border-right:10px solid transparent;
border-left:10px solid transparent;
border-bottom:10px solid transparent;

Draw a triangle:

width:0px;
border-top:10px solid red;
border-right:10px solid transparent;
border-left:10px solid transparent;
border-bottom:10px solid transparent;

Draw a right triangle:

width:0px;
border-top:20px solid red;
border-right:0px solid transparent;
border-left:10px solid transparent;
border-bottom:10px solid transparent;