sequence

Can you draw a triangle for me with CSS? (Topic of this article)

Set 4 edges in different colors: yellow, red, blue, green (top, right, bottom, left). Say well in advance, convenient debugging view below.

  .div {
    width: 0;
    height: 0;
    /* The top and bottom border width is 40px */
    border-top: 40px solid yellow;
    border-bottom: 40px solid blue;
    /* The left and right border width is 60px */
    border-left: 60px solid green;
    border-right: 60px solid red;
  }
Copy the code

Ps: You’ll also see my favorite pink background below, which represents a rectangular container with a size of 80 by 120 px. (80 = sum of top and bottom border widths, 120 = sum of left and right border widths)

CSS triangle principle:

1, by setting only one border color, the rest of the border transparent color.

2. The size of the triangle is affected by the width of the two frames that are not in the same direction.

For example: bottom border triangle, height = bottom border width, width = left and right border width sum.

No matter how many times you test it, you will never remember it without summarizing the nature of the rules. – 2021/08/29

Principle of triangular frame

Triangle size

The size of a triangle on a side is affected by the width of the two sides that are not in the same direction.

For the top border, the height is the width of the top border, and the width is the sum of the left and right border widths.

Width of top border triangle = width of left border + width of right border Height of top border triangle = width of top borderCopy the code

Equilateral triangle

If the width of the left and right sides is the same, it is an equilateral triangle, as follows:

If the left and right border widths are not equal, then it is not an equilateral triangle, as follows:

If the width of the left and right sides is 0, it is a right triangle, as follows:

Triangle border width debugging

Objective: To see how the size of the triangle border changes by setting the border width to 0.

The width of the top border is 0

When the width of the upper border is 0, the top of the left and right borders are compressed and clipped.

Left border triangle height = top border width and = bottom border width right border triangle height = top border width and = bottom border widthCopy the code

The width of the top and bottom borders is 0

When the width of the top and bottom borders is 0, the left and right borders are crushed.

Left border triangle height = top and bottom border width sum = 0 Right border triangle height = top and bottom border width sum = 0Copy the code

The width of the top and right borders is 0

When the width of the top and right border is 0, it becomes a small rectangle.

Width of bottom border triangle = left border width and = left border width height of left border triangle = top border width and = bottom border widthCopy the code

triangle

Principle of triangle formation

Just set the bottom border color to blue and the rest of the border color to transparent and you get a blue triangle.

Width of blue triangle = left and right border and height of blue triangle = width of bottom borderCopy the code

Triangle generator

Hand lift an online CSS triangle generator/Xu Xiaoxi, preview address -2021/08/29

// Triangle generation function principle
const getBorderWidthAndColor = (direction:string, w:number, h:number, color:string) = > {
  const borderWidthAndColor:any = {
    // Angle orientation of the triangle
    'on': {
      borderWidth: ` 0${w/2}px ${h}px ${w/2}px`.borderColor:`transparent transparent ${color} transparent`
    },
    'next': {
      borderWidth: `${h}px ${w/2}px 0 ${w/2}px`.borderColor:`${color} transparent transparent transparent`
    },
    'the left': {
      borderWidth: `${h/2}px ${w}px ${h/2}px 0`.borderColor:`transparent ${color} transparent transparent`
    },
    'right': {
      borderWidth: `${h/2}px 0 ${h/2}px ${w}px`.borderColor:`transparent transparent transparent ${color}`}}return borderWidthAndColor[direction]
}

// Rotation principle
transform: rotate(0deg);
Copy the code

polygon

parallelogram

The parallelogram implementation requires the use of two triangles

.divs-wrap {
  position: relative;
  width: 120px;
  height: 80px;
  background: #ff000020;
}
.div-black..div-blue {
  width: 0px;
  height: 0px;
  border-bottom: 40px solid blue;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 40px solid transparent;
  position: absolute;
}
.div-black {
  border-bottom-color: black;
  transform: rotate(180deg);
  top: 40px;
  left: 60px;
}
Copy the code

Other polygons

The rest of the polygons can be drawn using the principle above, but it is not necessary.

Calculating the position of the border length can be frustrating

SVG drawing may smell better. Now, though, I’m not very good at SVG. – 2021/08/29