使用 border 来生成有角度的形状

Thick borders

A div element with a border
                
                border-style:solid;
                border-color:red green #FC0 blue;
                border-width:20px;

MultiColour Square

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color:red green #FC0 blue;
                border-width:20px;

Right side of MultiColour square

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color:red green #FC0 blue;
                border-width:20px 20px 20px 0;

Top-right corner side of MultiColour square

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color:red green #FC0 blue;
                border-width:20px 20px 0 0;

One part of top-right corner side of MultiColour square

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color:red transparent transparent;
                border-width:20px 20px 0 0;

Or a longer version

                
                font-size:0px; line-height:0%; width:100px;
                border-style:solid;
                border-color:red transparent #FC0 blue;
                border-width:20px 20px 0 0;

Right side of MultiColour square with right border thicker

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color:red green #FC0 blue;
                border-width:20px 20px 0 0;

Right side of MultiColour square with right border thicker and top and bottom thinner

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color:red green #FC0 blue;
                border-width:10px 40px 10px 0;

Various shapes

Down arrow

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color: #77c transparent transparent;
                border-width:20px 10px 0 10px;

Up arrow

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color: transparent transparent #77c ;
                border-width:0 10px 20px 10px;

Left arrow

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color:transparent #77c transparent transparent;
                border-width:10px 20px 10px 0px;

Right arrow

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color: transparent transparent transparent #77C;
                border-width:10px 0px 10px 20px;

Hourglass

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color: #77c transparent;
                border-width:20px 10px 20px 10px;

Sideways hourglass

                
                font-size:0px; line-height:0%; width:0px;
                border-style:solid;
                border-color: transparent #77c;
                border-width:10px 20px;

Combining shapes