CSS Triangle Arrow Application Practice

Use CSS to make a div box without a picture with arrows (this code is more suitable for the pursuit of pure code)

This kind of effect can also be achieved with a picture background, the code will be more concise

CSS code:

CSS code copy content to clipboard

Div.container{position:absolute;

top:30px;

left:40px;

font-size:9pt;

Display:block;

height:100px;

width:200px;

Background-color:transparent;

*border:1px solid #666;

}

s{

Position:absolute;

top:-20px;

*top:-22px;

left:20px;

Display:block;

height:0;

width:0;

font-size:0;

line-height:0;

Border-color:transparent transparent #666 transparent;

Border-style:dashed dashed solid dashed;

border-width:10px;

}

I{position:absolute;

top:-9px;

*top:-9px;

left:-10px;

Display:block;

height:0;

width:0;

font-size:0;

line-height:0;

Border-color:transparent transparent #fff transparent;

Border-style:dashed dashed solid dashed;

border-width:10px;

}

. content{

border:1px solid #666;

-moz-border-radius:3px;

-webkit-border-radius:3px;

Position:absolute;

Background-color: #fff;

width:100%;

height:100%;

padding:5px;

*top:-2px;

*border-top:1px solid #666;

*border-top:1px solid #666;

*border-left:none;

*border-right:none;

*height:102px;

box-shadow:3px 3px 4px #999;

-moz-box-shadow:3px 3px 4px #999;

-webkit-box-shadow:3px 3px 4px #999;

* For IE 5.5-7 * *

Filter:progid:DXImageTransform.Microsoft.Shadow (strength=4, direction=135, color= ' #999999 ');

/* for IE 8 * *

-ms-filter: "Progid:DXImageTransform.Microsoft.Shadow (strength=4, direction=135, color= ' #999999 ')";

}

HTML code:

xml/html code to copy content to clipboard

　　

　　

　　
This is the text in the box, which can be displayed dynamically. Height automatically increase, it should be good ^_^

　　

　　

　　

　　

　　

Effect Chart:

This introduction under the CSS to make the triangle arrow

Usually, we do the diagram of the triangle, generally do a picture, and need two, because generally are the effect of the Drop-down menu, need to have a hover style, the arrow is reversed. That is not a better way, after all, to use two pictures to solve such a small problem too wasteful resources, so, I would like to use a pure CSS method to solve this problem, using just a CSS attribute, is border-width

Let's take a look at a style and what happens if you set the element border:

I can't seem to see anything, let me add a different color to the four borders and look at it:

Did you find something? Yes, let's get the text out of the middle:

So, there are 4 triangles, and then if we need the top triangle, we just have to set the border left, right, and bottom to the background color:

In this way, the triangles we need appear and can be set in 4 different directions:

The style code is simple, just a few words:

CSS code copy content to clipboard

Float:left;

Border-style:solid; border-width:10px;

Border-color: #000 #ccc #ccc #ccc;

height:0;

width:0;

font-size:0;

Practical application

For example, we're going to use the down arrow (compatible with IE6 notation)

HTML code:

xml/html code to copy content to clipboard

　　

CSS code:

CSS code copy content to clipboard

. demo{position:relative}

. bottombottom-arrow{

Position:absolute;

top:10px;

left:0px;

Border-style:solid;

border-width:100px;

Border-color: #000000 Transparent transparent transparent;/* top Border Set desired color * *

height:0;

width:0;

font-size:0;

_border-color: #000000 tomato tomato tomato; /* Border Transparent color for ie6-*/

_filter:chroma (Color=tomato);/* Border transparent color for ie6-*/

}

Description

The demo here is to use a border transparent color, if you do not use transparent, directly set Border-color for the color you need to do, eliminates the IE6 for compatible transparent border filter writing

The Chroma property can set the color specified in an object to be a transparent color, and its expression is as follows:

CSS code copy content to clipboard

Filter:chroma (Color=color)

The expression of this property is not simple, it has only one argument. Just use the color parameter to set the colors you want to specify to be transparent.