A simple example of CSS making triangles and buttons

I first say how to make a triangle, I believe that everyone in the normal time to visit the site will see some of the navigation bar triangle bar, such as:

NetEase homepage of the Head menu bar, there will be such a triangle

When the mouse passes, the triangle flips vertically, as follows

Now I'm sharing the idea of making triangles, mostly using borders.

First, four triangles are merged together, which is the four triangles formed by the four borders of a square.

Source:

<! DOCTYPE html>



The effect is as follows:




Now, to take out one of the triangles, we're actually going to hide the rest.

Source:

<! DOCTYPE html>

The effect is as follows:


Next, I share a kind of button approach

The main use of the border style, box shadow and pseudo-class effect to achieve

Source:

<! DOCTYPE html>

Effect:


The effect may be not too beautiful, to be promoted, we can play their own imagination to make a better effect, I wish you a happy study!

The above this article with CSS to make the triangle and the button simple example is the small part to share to everybody's whole content, hoped can give everybody a reference, also hoped that everybody many support topic.alibabacloud.com.