Various demo:css implement triangles, CSS size trapezoid, SVG use

Various demo:

1, CSS implementation of the square

Idea: Width is 0;height for 0, half of the side length using boder-width as square, not any byte, Border-style is solid; Border-color is a square fill color.

<! DOCTYPE html>            . triangle{                0;                 0;                Border-width:30px;                Border-style:solid;                Border-color: #e66161;             }         </style>    
Graphics
2, CSS implementation of the Triangle
Train of thought: Width is 0;height for 0;border-width is half of right triangle hypotenuse; there are four color attributes in Border-color, the first is the fill color in right triangle, the second is the right-right triangle fill color, The third one is the bottom-right triangle fill color, the fourth is left-right triangle fill color.
Code:
<! DOCTYPE html>            . triangle{                0;                 0;                Border-width:30px;                Border-style:solid;                Border-color: #000000 transparent transparent transparent;            }         </style>    
Graphics
Code:
. triangle{                0;                 0;                Border-width:30px;                Border-style:solid;                Border-color: #000000 #000000 transparent transparent;            }
Graphics
Code:
. triangle{                0;                 0;                Border-width:30px;                Border-style:solid;                Border-color: #000000 #f50303 transparent transparent;            }
Graphics
3, CSS to achieve a square outside the trapezoid
Idea: or before the idea, width is 20, height is 20, trapezoid short Bottom is the width of div; trapezoid long side =width+border-width*2;
Code:
<! DOCTYPE html>            . triangle{                width:20px;                height:20px;                Border-width:30px;                Border-style:solid;                Border-color: #000000 transparent transparent transparent;            }         </style>    
Graphics:
Code:
. triangle{                0;                 0;                Border-width:30px;                Border-style:solid;                Border-color: #e66161 #f3bb5b #94e24f #85bfda;            }
Graphics:
4, CSS implementation of this graphic
Idea: Using two triangles for stitching, one is the background color, one is the border color, and then use the positioning overlap together, positioning to be a pixel difference.
Code:
<!        DOCTYPE html>. box{position:relative;                width:240px;                height:60px; Line-height:60px;                Background: #e9fbe4; Box-shadow:1px 2px 3px #e9fbe4;                border:1px solid #c9e9c0; Border-radius:4px; Text-Align:center;            Color: #0c7823; }. Triangle-border{Width:0; Height:0; Border-width:10px; Border-Style:solid;                Position:absolute;                left:30px;                            Overflow:hidden; }. border{bottom:-20px; Border-color: #C9E9C0 transparent transparent transparent; }. background{bottom:-19px; Border-color: #E9FBE4 transparent transparent transparent; }        </style> 
5. CSS Implementation
Various demo:css implement triangles, CSS size trapezoid, SVG use