Code for drawing triangles using CSS and pure CSS

1. Create an element, whatever it is, but I often use block elements. If the element in the row is displayed: block it.

<Div class = "triangle"> </div>

2. Set its width and height to height: 0px; width: 0px;

3. Set the border attribute to implement triangles.

First, you need to know what border is like. I wrote a style like this:

Border: 50px solid #000; border-color: # f00 #000 # f0f # 00f;

The effect of FF is as follows:

The four triangles are merged into a square. It is very clear here, as long as you keep the desired, other settings to transparent can achieve the effect of the triangle, then:

Border: 50px solid #000; border-color: # f00 transparent;

You can see a red triangle in FF as follows:

But what about Internet Explorer, especially Internet Explorer 6?

This is because it does not support transparent, so it is not transparent, so it can be like this:

Border: 50px solid #000; border-color: # f00 transparent; border-style: solid dashed;

Set border-style to dashed where you want it to be transparent. IE6 can achieve the same effect as FF.

In this case, only four triangles are implemented. What if we want to have a right angle to 45 oblique lines? Then we can use two triangles in the square direction and combine them, for example:

Code:

Border: 50px solid #000; border-color: # f00 #000 transparent; border-style: solid dashed;

As long as the color is unified, a triangle with 45 oblique lines will be formed, while IE6 will display like this:

This is because IE6 has a row with high support. Setting the Row height to 0 is the same as FF: line-height: 0px;

Final Demonstration:

<! DOCTYPE html> 





Tip: the code can be modified before running!

Source: http://blog.sina.com.cn/s/blog_74d6cedd0100z0os.html