div { width: 0; height: 0; The line - height: 0; font-size: 0; border-top: 10px solid red; border-right: 10px solid green; border-bottom: 10px solid blue; border-left: 10px solid #000; }Copy the code

To get an idea of where CSS triangles come from, do the following:

  1. We use CSS borders to simulate triangles
  2. Width height is 0
  3. We need to write all 4 borders, only keep the required border color, the rest can not be omitted, just change to transparent
  4. Font-size: 0; line-height: 0;