Draw triangles from CSS border

Through the CSS border can draw a triangle, different style combinations, have different effects, you can control its size, color, direction. Look at the following various graphics, I believe there may be a lot of graphics, we have not seen.

Write the public style first:

1{2    width: 0;  3    height: 0;  4     5    border-color: transparent;  6    border-width: 1rem;  7    border-style: solid;  8 }

Based on the above CSS, add the following combination of code, you will be able to control the direction of the triangle:

1 border-left-color: #000;

1 border-right-color: #000;

1 border-top-color: #000;

1 border-bottom-color: #000;

1 border-left-color: #000; 2 border-bottom-color: #000;

1 border-right-color: #000; 2 border-bottom-color: #000;

1 border-right-color: #000; 2 border-top-color: #000;

1 border-left-color: #000; 2 border-top-color: #000;

1 border-top-color: #000; 2 border-bottom-color: #000;

1 border-left-color: #000; 2 border-right-color: #000;

1 border-top-color: #000; 2 border-left-color: #000; 3 border-bottom-color: #000;

1 border-top-color: #000; 2 border-left-color: #000; 3 border-right-color: #000;

1 border-bottom-color: #000; 2 border-left-color: #000; 3 border-right-color: #000;

1 border-top-color: #000; 2 border-right-color: #000; 3 border-bottom-color: #000;

also have The following effect,

1 border-left-color: #000; 2 border-right-color: #000; 3 Border-left-width:3rem;

Different combinations produce different effects, and you can try various combinations to bring the effects.

Draw triangles from CSS border