Web Design Tips Summary: CSS to make the triangle in the Web page

Web page Production WEBJX article introduction: triangles We often use in lists, Drop-down prompts, breadcrumbs Navigate the location of the user to guide the role, for example, where there is a drop-down list, we can use the down arrow, in the list, we can tell the user each list item and the next list item relationship, when in breadcrumbs navigation, To let users know where he is now in the column or channel. What we have

Triangles we often use in lists, Drop-down prompts, breadcrumbs Navigate the location of the user to guide the role, for example, where there is a drop-down list, we can use the down arrow, in the list, we can tell the user each list item and the next list item relationship, when in breadcrumbs navigation, To let users know where he is now in the column or channel. What methods do we have to implement it, and I have made a simple summary based on our actual work experience.

The first option, we can use the background image of the way to deal with, this is our most frequently used method.
1 A single cut out of the triangle, we can according to the requirements of the UI design, cut out the corresponding pictures, for example, we can easily according to the needs of the production of different heights and colors of the triangle. In terms of usage, HTML code and CSS code are relatively simple. As the following figure is an example:

This direct use of the background image method is suitable for us in the triangle contains gradient, pattern, texture and other special effects, we can set its color to ensure that the edge of the graphic and the background color perfectly consistent. The disadvantage is that we need to create a picture for each different direction, increasing the number of HTTP requests and CSS code.
Since this method is simpler, we will not do the demo.
2 What do we do to reduce HTTP requests and to mark triangles in four directions compared to the previous one? We can make a diamond and choose the shape that matches it by using the background positioning of the CSS. So we can use a graph to achieve the goal of four graphs.

/web/uploadpic/2011-3/201131412587717.gif ) No-repeat 0 0;width:67px;height:34px;display:block;position:absolute;top:-34px;left:15px "></em><em Style= "Background:url (/web/uploadpic/2011-3/201131412587717.gif ) no-repeat-35px 0; width:34px;height:67px;display:block;position:absolute;right:-34px;top:15px; " ></em>     <em style= "Background:url (/web/uploadpic/2011-3 /201131412587717.gif ) No-repeat 0-35px;width:67px;height:34px;display:block;position:absolute;bottom:- 34px;left:15px; " ></em>     <em style= "Background:url (/web/uploadpic/2011-3 /201131412587717.gif ) no-repeat 0 0;width:34px;height:67px;display:block;position:absolute;left:-34px;top:15px; " ></em> </div>

3) Method Two methods Although we can achieve the call once the background picture to mark four trigonometric states, but in the color is really single, we can only by a color, then we need to add a triangle also in the excitation of mouse suspension pseudo-class response, we should do? For example, when the mouse is suspended from red to orange? So we can use this method, through the positive and negative method, method two of the method we pass a positive shape, that the following example we use a negative shape

HTML file

1 2 3 4 5 6

<div style= "Width:100px;height:100px;position:relative;margin:34px;background: #6699FF" > <a class= "n_a_1" ></a> <a class= "n_a_2" ></a> <a class= "N_a_3" ></a> <a class= "N_a_4" >&L T;/a> </div>

CSS file

N_a_1,.n_a_2,.n_a_3,.n_a_4{background-image:url (/web/uploadpic/2011-3/201131412588932. GIF ); background-repeat:no-repeat;position:absolute;display:block;} A.n_a_1{background-color: #0033CC; background-position:0 0;WIDTH:67PX;HEIGHT:34PX;TOP:-34PX;LEFT:15PX} a.n_a_1:hover{background-color: #db0085} a.n_a_2{background-color:# 0066cc;background-position:-33px 0;width:34px;height:67px;right:-34px;top:15px;} A.n_a_2:hover{background-color: #db0085} a.n_a_3{background-color: #00CCCC; background-position:0 -33px;width:67px; height:34px;bottom:-34px;left:15px;} A.n_a_3:hover{background-color: #db0085} a.n_a_4{background-color: #00FFCC; background-position:0 0;width:34px;height:67px;left:-34px;top:15px;} A.n_a_4:hover{background-color: #db0085}

In this way, we can easily change the background color to get a different color triangle.
But we also found another problem, which is that when we want to put this triangle in a colored background, the color of the region that makes up its negative shape will also be our limit, because we have to match the color that makes up the negative shape. And the second method and the third method can only achieve a fixed size of the positive triangle, if we want to change its shape at any time, do not use the CSS3 background size properties Background-size Words (this property has been opera\firefox\safari\chrome\ IE 9), perhaps the following method is more appropriate.

The second scenario, we are not through the graphic image of the way, but directly using the label itself CSS attribute features or characters to create.
1 We can use the border property to implement, border properties include width, color, style. We can change its color to fit in. By the following figure I can analyze the characteristics of border properties:

Related code:

1 2 3 4 5 6 7 8 9 10 11 12 13-14

<! DOCTYPE html>

We can change the color of border in different directions to find the color we need, and we can even create triangles of different angles through border-width modifications.

Is it interesting to have the above parts obtained by modifying the border-width, so that we can easily save the valuable HTTP request for creating the triangle?
Ingenuity is easy, maybe sometimes you need is not a isosceles triangle, for example, we common to the following graphics

That is not a isosceles graph, we can also change the width of the border to get:

1	<div style= "border-color:transparent #FF6699 transparent transparent;border-style:solid;border-width:0 30px 20px 0 ; height:0;line-height:0;width:0; " ></div>

2 by rotating the block-label angle method, this method needs to support the browser support of the CSS3 property transform.
We often need such a form:

So let's break this graph down.

Let's first implement the graph that exploded above:

When we set the background color values of the rotated squares to the same color values that intersect the boxes, they are merged into one.

3 by character implementation. The implementation method, like the one above, sets the color of the character to the same color as the desired container, thus obtaining a visual triangle. Just this time we didn't use the CSS3 transform property, the compatibility is better.

The code is as follows:

<! DOCTYPE html>

Case study:
1) A linear triangle, as shown below:

The realization of this kind of graphics we often rely on the graphics implementation, in fact, we can through the border properties, the superposition of two triangles can achieve the corresponding effect:

1 2 3 4 5 6 7 8 9

<! DOCTYPE html>

This will enable us to get a more beautiful response window:

2) Navigation status

We can also achieve this by border the triangle created by:

label one label two label three label four

HTML code:

1 2 3 4 5 6 7 8 9

<! DOCTYPE html>

The above we realize is fixed width, that if is the adaptive width, the arrow upward?

• Home Page
• Level Two column
• The level Three column may be longer
• level four column

1 2 3 4 5 6 7 8 9 a

<! DOCTYPE html>

What do we need to be aware of here? That is, the arrow is absolutely positioned, be careful when the arrows are too large, the above text covered.

The above is just a summary of some methods, may not be the best method, the optimal implementation of the method may also need specific problems specific analysis, when this is a discussion.
At the same time, we welcome conflicting views.