How to draw a triangle with pure CSS

How to draw a triangle with CSS: 1. Define a label element with a width and height of 0; 2. Use "border-direction: border width solid border color" to define the base of the triangle; 3. The remaining three Just set it with a transparent border.

The operating environment of this tutorial: Windows7 system, CSS3&&HTML5 version, Dell G3 computer.

Triangle implementation principle:

• The width (width) is 0; the height (height) ) is 0;

• There is a horizontal and vertical edge (up, down, left and right) set to border-direction: length solid red, this is the straight line at the bottom. Use border-direction for other sides: length solid transparent.

• There are two settings for horizontal and vertical sides (up, down, left and right). If the hypotenuse is on the right side of the triangle, then set the straight line of top or bottom, and the diagonal line on the right. If the hypotenuse is on the left side of the triangle, then set the top or bottom straight line and the left diagonal line.
  

1. Up

# #

#triangle-up {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 100px solid red;
}

2. Downward

##

#triangle-down {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-top: 100px solid red;
}

Recommended learning:

css video tutorial

The above is the detailed content of How to draw a triangle with pure CSS. For more information, please follow other related articles on the PHP Chinese website!