Basic principles and practice of drawing triangles and polygon lines with HTML and CSS

Basic Schema HTML Schema

<div class = 'test'></div>

基本 CSS 代码

.test {
  width: 100px;
  height: 100px;
  background-color: #FFFFFF; 
  border-left: 20px solid black;  
  border-top:20px solid blue;  
  border-right: 20px solid green;  
  border-bottom:20px solid orange;  
}