triangle-up {

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;

}

triangle-down {

width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid red;

}

triangle-left {

width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid red;
border-bottom: 50px solid transparent;

}

triangle-right {

width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid red;
border-bottom: 50px solid transparent;

}

triangle-topleft {

width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;

}

triangle-topright {

width: 0;
height: 0;
border-top: 100px solid red;
border-left: 100px solid transparent; 

}

triangle-bottomleft {

width: 0;
height: 0;
border-bottom: 100px solid red;
border-right: 100px solid transparent;

}

triangle-bottomright {

width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;

}

页面转载自：https://www.jb51.net/article/42513.htm