Detailed explanation of several ways to create a top-left triangle in CSS

Today we will introduce several ways to use CSS to write a top-left triangle.

Schematic diagram (taking 60px width and height as an example):

This kind of triangle can generally be used as the lower left foot of "dialog box" type graphics.

The first one:

#triangle-topleft {
  border: 30px solid #e6686e;
  height: 0;
  width: 0;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

Second type:

#triangle-topleft {
  width: 0;
  height: 0;
  border-top: 60px solid #e6686e;
  border-right: 60px solid transparent;
}

The third type:

#triangle-topleft {
  border: 60px solid transparent;
  width: 0;
  height: 0;
  border-left-color: #e6686e;
  border-top-width: 0;
}

You can try more different triangle methods and triangles in different directions.

Here is a highly recommended website that showcases commonly used CSS graphics: https://css-tricks.com/the-shapes-of-css/

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.