Small knowledge, big challenge! This article is participating in the “Essentials for Programmers” creative activity. This article has participated in the “Digitalstar Project” to win a creative gift package and challenge the creative incentive money.

triangle

1.1 Knowledge supplement – border

attribute Attributes that
border Attribute setting elementAll the bordertheThe width of the,style,color
border-top Attribute setting elementOn the bordertheThe width of the,style,color
border-right Attribute setting elementRight margintheThe width of the,style,color
border-bottom Attribute setting elementUnder the frametheThe width of the,style,color
border-left Attribute setting elementThe left margintheThe width of the,style,color

1.2 Case 1: Observe the border feature and draw a triangle

👉👉(click Transfer) 🥇 When we set only the top border, we see that the border is actually a 4-sided shape and does not exceed the width of the DOM horizontally

 border-top:  50px solid green;
Copy the code

🥈 So when we set the top border and the right border, we see that the border that should not be horizontal beyond the width of the DOM has already been, and the width exceeded is equal to the width of the right border

  border-top:  50px solid green;
  border-right:  50px solid red;
Copy the code


The effect is as follows:🥉 In that case, let’s look at the four-sided one

  border-top:  50px solid green;
  border-right:  50px solid red;
  border-bottom:  50px solid orange;
  border-left:  50px solid blue;
Copy the code

🏅 As you can see from the example above, we can get a triangle as long as we set the width and height of the DOM to 0 and set the unwanted triangles to transparent

.demo3{
  width: 0;
  height: 0; 
  border-top:  50px solid green;
  Transparent: sets the transparent color */
  border-right:  50px solid transparent;
  border-bottom:  50px solid transparent;
  border-left:  50px solid transparent;
}
Copy the code

By analogy, triangles for each Angle are in the example, online code entry 👉👉(click send)

1.3 Case 2: Triangle (Two borders drawn)

In the example above we have drawn a simple triangle, but sometimes we need a triangle that does not need 4 borders at the same time, 2 borders can also create a triangle.

In the case of width and height,Adjacent borders will be spliced, the rest of the dom does not exceed the width and heightSo in the absence of width and height,The adjacent borders will still be spliced, but without the rest of the border, only the splicing part will be retained.

.demo{
  width: 0;
  height: 0; 
  border-top:  50px solid green;
  border-right:  50px solid orange;
}
Copy the code

So we set the corresponding transparent color and we get a triangle of other angles

  border-top:  50px solid green;
  border-right:  50px solid transparent;
Copy the code

By analogy, the other angles of the triangle are in the example, online code entry 👉👉(click transfer)

1.4 Case 3: Triangle (Rotation)

We know that the above angles are completely inadequate, so we introduce the transform property and the rotate() function

attribute Attributes that
rotate() The function defines a way to wrap elements around acenterOr bytransform-originSet up theThe originA transformation that rotates without deforming

Next, set different angles to obtain triangles of various angles, online code entry 👉👉(click transfer)

1.5 Case 3: Triangle (Triangular arrow)

I’ve written three approaches here, each with pros and cons. In fact, the actual project may rarely encounter these, but there are many solutions, the appropriate project is the best.

1.5.1 Pseudo-element construction

This is one of the most written on the web. Build a pseudo-element by ::after, and then superimpose it by changing the position of the absolute position to get the arrow, as shown below:

 .demo2{
   width: 0;
   height: 0;
   border-top:  100px solid red;
   border-right:  100px solid transparent;
   position: relative;
   /* Rotate to get arrows at different angles */
   transform: rotate(-45deg);
}
  /* False element */
.demo2::after{
  content: ' ';
  position: absolute;
  right: -110px;
  top: -90px;
  border-top:  100px solid white;
  border-right:  100px solid transparent;
}
Copy the code

Online code entry 👉👉(Click to send)

After setting the pseudo-element color to the background color, you get an arrow

The advantages and disadvantages instructions
advantages You can customize arrows from different angles
disadvantages The pseudo-element must be the same as the background color, otherwise it will not display properly

1.5.2 box – shadow

The box-shadow attribute is used to add a shadow effect to the frame of an element,

.demo{
  width: 0;
  height: 0; 
  border-top:  100px solid transparent;
  border-right:  100px solid transparent;
  /* Parameter 1: x offset, parameter 2:y offset, parameter 3: color */
  box-shadow: 10px 10px red; 
  /* Adjust the Angle */
  transform: rotate(-45deg); 
}
Copy the code

Online code entry 👉👉(Click to send)

The advantages and disadvantages instructions
advantages You don’t have to worry about the background color, the code is relatively simple
disadvantages Unable to adjust the Angle

1.5.3 border

“Border” is as simple as using the border to make an arrow. Look at the code directly, just connect the two borders together and adjust the Angle

.demo{
  width: 100px;
  height: 100px; 
  border-top:  10px solid red;
  border-right:  10px solid red;
  /* Adjust the Angle */
  transform: rotate(45deg); 
}
Copy the code

Online code entry 👉👉(Click to send)

The advantages and disadvantages instructions
advantages You don’t have to worry about the background color, the code is relatively simple
disadvantages Unable to adjust the Angle