Shulou(Shulou.com)06/03 Report--

CSS triangular arrow application practice example analysis, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

Use CSS to make DIV boxes with arrows without pictures (this code is more suitable for those who pursue pure code)

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

CSS Code:

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:

This is the text in the box and can be displayed dynamically. Automatic height increase, which should be good ^ _ ^

Effect picture:

This time, I will introduce CSS to make triangular arrowheads.

Usually, when we make the triangle in the picture above, we usually make a picture, and we need two, because it is generally the effect of a drop-down menu, we need to have a hover style, and the arrow is reversed. Is there a better way? after all, it's a waste of resources to use two pictures to solve such a small problem, so I'm going to use a pure CSS method to solve this problem. All I need is an attribute of css, that is, border-width.

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

I don't seem to see anything. let me add different colors to the four borders and take a look:

Did you find something? Yes, let's get rid of the middle words:

In this way, there are four triangles, and then if we need the top triangle, we just need to set the left, right, and bottom of border to the background color:

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

The style code is simple, just a few words:

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 want to use the down arrow (compatible with IE6)

HTML Code:

CSS Code:

.demo {position:relative}

. bottombottom-arrow {

Position:absolute

Top:10px

Left:0px

Border-style:solid

Border-width:100px

The border on border-color:#000000 transparent transparent transparent;/* sets the 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 demonstration here uses the border transparent color. If you can't use the transparent color, just set border-color to the color you need, eliminating the transparent frame filter writing for compatibility with IE6.

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

Filter:Chroma (color=color)

The expression of this property is not very simple, it has only one parameter. Just set the transparent color you want to specify with the Color parameter.

After reading the above, have you mastered the method of example analysis of CSS triangular arrow application practice? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.