Draw triangle and trapezoid with border

For more, please visit my personal blog.

---

preface

Our group wanted to recruit a front-end development, I also took the opportunity to sort out the basic knowledge of the front-end. Otherwise in the interview if someone asked inverted, people still think that our company has no technical cattle.

While reviewing the basics of CSS, I was shocked by a user’s brilliant idea that border could be used to draw triangles. Up until now, I’ve just framed it with border. – -!!

---

The body of the

Our more general use is to set the border with the border property, as shown below:

div {
  width: 100;
  height: 100;
  border: 1px solid;
}
Copy the code

Now, for easy observation, let’s set the four edges to different colors, as shown below:

div {
  width: 100;
  height: 100;
  border-top: 1px solid red;
  border-left: 1px solid orange;
  border-right: 1px solid green;
  border-bottom: 1px solid blue;
}
Copy the code

Mind you, something amazing is about to happen. Make the border bold as follows:

div {
  width: 100;
  height: 100;
  border-top: 50px solid red;
  border-left: 50px solid orange;
  border-right: 50px solid green;
  border-bottom: 50px solid blue;
}
Copy the code

See? There are four trapezoids. Next, reduce the length and width as shown below:

div {
  width: 10;
  height: 10;
  border-top: 50px solid red;
  border-left: 50px solid orange;
  border-right: 50px solid green;
  border-bottom: 50px solid blue;
}
Copy the code

The short sides of the trapezoid get shorter and shorter until they get to zero, and you have a triangle. So, set the length and width to 0, as follows:

div {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-left: 50px solid orange;
  border-right: 50px solid green;
  border-bottom: 50px solid blue;
}
Copy the code

To show which triangle you want, just set the other three to transparent, as shown below:

div {
  width: 0;
  height: 0;
  border-top: 50px solid red;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 50px solid transparent;
}
Copy the code

Even, all kinds of triangle, trapezoid combination form can be freely splicing, as follows:

div {
  width: 0;
  height: 0;
  border-top:50px solid red;
  border-left:50px solid transparent;
  border-right:50px solid green;
  border-bottom:50px solid transparent;
}
Copy the code

---

div {
  width: 100;
  height: 0;
  border-top:50px solid red;
  border-left:50px solid transparent;
  border-right:50px solid green;
  border-bottom:50px solid transparent;
}
Copy the code

---

div {
  width:100;
  height:0;
  border-top:100px solid red;
  border-left:20px solid yellow;
  border-right:20px solid green;
  border-bottom:0px solid transparent;
}
Copy the code

---

At the end

CSS is really powerful ah, feel as long as the technology is good enough, you can use CSS to draw any graphics. Finally, a blue fat man with CSS is attached.

---

More programming teaching please pay attention to the public account: Pan Gao accompany you to learn programming

---