Provide zblog template_zblog them_wordpress template download and customization

Principle and usage of writing triangle in css

Tianxing Studio 2019-11-30 19:41 Web special effects two thousand three hundred and seventy-one 0 Comments


I used to use css to write triangles, but I searched one online anyway case Come out and use it. Today, I worked hard to understand the principle and use method, and recorded it. I hope it can be helpful to people who are as weak as me.

 Principle and usage of writing triangle in css css special effect css triangle css3 web page special effect page 1

First, css writes triangles through border. Most people use border to define borders. So if you want to use border to write triangles, they will fall into the thinking mode of the border

First, let's define that the border of elements is actually a combination of triangles. Isn't it magic? Are you surprised?

Let's use a piece of code to confirm this problem:

 .box{     width:50px;     height:50px;     border-width:50px;     border-style: solid;     border-color:orange blue red green; }

Then you will find that the page displays like this:

 Principle and usage of writing triangle in css css special effect css triangle css3 web page special effect page 2

If you understand this concept, then triangles are easy to write. For example, if we want a triangle with downward corners, we can keep the color of the top border, and set the other three colors to transparent.

So we just need to change the above code to "border color: orange transparent transparent;", and verify that:

 Principle and usage of writing triangle in css css special effect css triangle css3 web page special effect page 3

Sure enough, you can make all kinds of triangles after understanding the principle and usage. You can also use multiple div boxes to piece together various other graphics.


welcome you Comment: Cancel Reply

 Please fill in the verification code
  • Latest articles
  • Hot article ranking
  • Most Comments
Label aggregation
  • Sign in
  • Registered account Forgot your password?
  • register
  • Already have an account? Direct login Forgot your password?
  • Social account login