CSS makes triangles and buttons, CSS makes triangles

CSS makes triangles and buttons, CSS makes triangles
You can use the border style knowledge point in the previous blog post to create triangles and buttons in CSS.

Let me first talk about how to create a triangle. I believe that you will see some triangles in the navigation bar when visiting the website, for example:

There will also be a triangle in the header menu bar of the Netease homepage.

When the mouse goes over, the triangle will flip vertically, as shown below:

Now I want to share my practice of creating triangles mainly by using borders.

First, the square where the four triangles are merged, that is, the four triangles formed by the four borders of the square.

Source code:

<! DOCTYPE html> 
The effect is as follows:
 

 
Now, to extract one of the triangles, we need to hide the other triangles.
Source code:
<! DOCTYPE html> 
The effect is as follows:
 

 
 
Next, I will share a button-based approach.
It is mainly implemented by border style, box shadow, and pseudo effect.
Source code:
<! DOCTYPE html> 
Effect:
Start

 
The results may not be very beautiful and need to be improved. You can use your imagination to make better results. I wish you a pleasant learning experience!