Tip on top
:
Code:
[Html]
<Html>
<Head>
<Title> tip div </title>
<Style type = "text/css">
# Top
{
Width: 400px;
Height: 250px;
Border: 3px solid;/* The border width is 3px */
Position: relative;
}
. Sp1,. sp2
{
Display: block;
Height: 0px;
Width: 0px;
Position: absolute;
Font-size: 0;
Line-height: 0;
}
. Sp1
{
Top:-9px;/* its absolute value plus the width of the span border is 5 times the width of the div border */
Left: 40px;/* It is used to determine the tip position */
Border-top: 0px;
Border-bottom: 6px solid black;/* pay attention to color changes */
Border-right: 6px solid white;
Border-left: 6px solid white;
}
. Sp2
{
Top: 6px;/* double the Border Width */
Left:-3px;/* is-1 times the Border Width */
Border-top: 0px;
Border-bottom: 3px solid white;
Border-right: 3px solid black;
Border-left: 3px solid black;
}
</Style>
</Head>
<Body>
<Div id = "top">
<Span class = "sp1">
<Span class = "sp2"> </span>
</Span>
</Div>
</Body>
</Html>
<Html>
<Head>
<Title> tip div </title>
<Style type = "text/css">
# Top
{
Width: 400px;
Height: 250px;
Border: 3px solid;/* The border width is 3px */
Position: relative;
}
. Sp1,. sp2
{
Display: block;
Height: 0px;
Width: 0px;
Position: absolute;
Font-size: 0;
Line-height: 0;
}
. Sp1
{
Top:-9px;/* its absolute value plus the width of the span border is 5 times the width of the div border */
Left: 40px;/* It is used to determine the tip position */
Border-top: 0px;
Border-bottom: 6px solid black;/* pay attention to color changes */
Border-right: 6px solid white;
Border-left: 6px solid white;
}
. Sp2
{
Top: 6px;/* double the Border Width */
Left:-3px;/* is-1 times the Border Width */
Border-top: 0px;
Border-bottom: 3px solid white;
Border-right: 3px solid black;
Border-left: 3px solid black;
}
</Style>
</Head>
<Body>
<Div id = "top">
<Span class = "sp1">
<Span class = "sp2"> </span>
</Span>
</Div>
</Body>
</Html>
The tip is below
:
Code:
[Html]
<Html>
<Head>
<Title> tip div </title>
<Style type = "text/css">
# Bottom
{
Width: 400px;
Height: 250px;
Border: 3px solid;/* The border width is 3px */
Position: relative;
}
. Sp1,. sp2
{
Display: block;
Height: 0px;
Width: 0px;
Position: absolute;
Font-size: 0;
Line-height: 0;
}
. Sp1
{
Bottom:-9px;/* its absolute value plus the width of the span border is 5 times the width of the div border */
Left: 40px;/* It is used to determine the tip position */
Border-bottom: 0px;
Border-top: 6px solid black;/* pay attention to color changes */
Border-right: 6px solid white;
Border-left: 6px solid white;
}
. Sp2
{
Bottom: 6px;/* is twice the width of the border */
Left:-3px;/* is-1 times the Border Width */
Border-bottom: 0px;
Border-top: 3px solid white;
Border-right: 3px solid black;
Border-left: 3px solid black;
}
</Style>
</Head>
<Body>
<Div id = "bottom">
<Span class = "sp1">
<Span class = "sp2"> </span>
</Span>
</Div>
</Body>
</Html>
<Html>
<Head>
<Title> tip div </title>
<Style type = "text/css">
# Bottom
{
Width: 400px;
Height: 250px;
Border: 3px solid;/* The border width is 3px */
Position: relative;
}
. Sp1,. sp2
{
Display: block;
Height: 0px;
Width: 0px;
Position: absolute;
Font-size: 0;
Line-height: 0;
}
. Sp1
{
Bottom:-9px;/* its absolute value plus the width of the span border is 5 times the width of the div border */
Left: 40px;/* It is used to determine the tip position */
Border-bottom: 0px;
Border-top: 6px solid black;/* pay attention to color changes */
Border-right: 6px solid white;
Border-left: 6px solid white;
}
. Sp2
{
Bottom: 6px;/* is twice the width of the border */
Left:-3px;/* is-1 times the Border Width */
Border-bottom: 0px;
Border-top: 3px solid white;
Border-right: 3px solid black;
Border-left: 3px solid black;
}
</Style>
</Head>
<Body>
<Div id = "bottom">
<Span class = "sp1">
<Span class = "sp2"> </span>
</Span>
</Div>
</Body>
</Html>
Pointed on the left
:
Code:
[Html]
<Html>
<Head>
<Title> tip div </title>
<Style type = "text/css">
# Left
{
Width: 400px;
Height: 250px;
Border: 3px solid;/* The border width is 3px */
Position: relative;
}
. Sp1,. sp2
{
Display: block;
Height: 0px;
Width: 0px;
Position: absolute;
Font-size: 0;
Line-height: 0;
}
. Sp1
{
Left:-9px;/* its absolute value plus the width of the span border is 5 times the width of the div border */
Top: 40px;/* It is used to determine the tip position */
Border-left: 0px;
Border-top: 6px solid white;/* pay attention to color changes */
Border-right: 6px solid black;
Border-bottom: 6px solid white;
}
. Sp2
{
Left: 6px;/* double the Border Width */
Top:-3px;/* indicates the width of the border */
Border-left: 0px;
Border-top: 3px solid black;
Border-right: 3px solid white;
Border-bottom: 3px solid black;
}
</Style>
</Head>
<Body>
<Div id = "left">
<Span class = "sp1">
<Span class = "sp2"> </span>
</Span>
</Div>
</Body>
</Html>
<Html>
<Head>
<Title> tip div </title>
<Style type = "text/css">
# Left
{
Width: 400px;
Height: 250px;
Border: 3px solid;/* The border width is 3px */
Position: relative;
}
. Sp1,. sp2
{
Display: block;
Height: 0px;
Width: 0px;
Position: absolute;
Font-size: 0;
Line-height: 0;
}
. Sp1
{
Left:-9px;/* its absolute value plus the width of the span border is 5 times the width of the div border */
Top: 40px;/* It is used to determine the tip position */
Border-left: 0px;
Border-top: 6px solid white;/* pay attention to color changes */
Border-right: 6px solid black;
Border-bottom: 6px solid white;
}
. Sp2
{
Left: 6px;/* double the Border Width */
Top:-3px;/* indicates the width of the border */
Border-left: 0px;
Border-top: 3px solid black;
Border-right: 3px solid white;
Border-bottom: 3px solid black;
}
</Style>
</Head>
<Body>
<Div id = "left">
<Span class = "sp1">
<Span class = "sp2"> </span>
</Span>
</Div>
</Body>
</Html>
Pointed on the right
:
Code:
[Html]
<Html>
<Head>
<Title> tip div </title>
<Style type = "text/css">
# Right
{
Width: 400px;
Height: 250px;
Border: 3px solid;/* The border width is 3px */
Position: relative;
}
. Sp1,. sp2
{
Display: block;
Height: 0px;
Width: 0px;
Position: absolute;
Font-size: 0;
Line-height: 0;
}
. Sp1
{
Right:-9px;/* its absolute value plus the width of the span border is 5 times the width of the div border */
Top: 40px;/* It is used to determine the tip position */
Border-right: 0px;
Border-top: 6px solid white;/* pay attention to color changes */
Border-bottom: 6px solid white;
Border-left: 6px solid black;
}
. Sp2
{
Right: 6px;/* double the Border Width */
Top:-3px;/* indicates the width of the border */
Border-right: 0px;
Border-top: 3px solid black;
Border-bottom: 3px solid black;
Border-left: 3px solid white;
}
</Style>
</Head>
<Body>
<Div id = "right">
<Span class = "sp1">
<Span class = "sp2"> </span>
</Span>
</Div>
</Body>
</Html>
<Html>
<Head>
<Title> tip div </title>
<Style type = "text/css">
# Right
{
Width: 400px;
Height: 250px;
Border: 3px solid;/* The border width is 3px */
Position: relative;
}
. Sp1,. sp2
{
Display: block;
Height: 0px;
Width: 0px;
Position: absolute;
Font-size: 0;
Line-height: 0;
}
. Sp1
{
Right:-9px;/* its absolute value plus the width of the span border is 5 times the width of the div border */
Top: 40px;/* It is used to determine the tip position */
Border-right: 0px;
Border-top: 6px solid white;/* pay attention to color changes */
Border-bottom: 6px solid white;
Border-left: 6px solid black;
}
. Sp2
{
Right: 6px;/* double the Border Width */
Top:-3px;/* indicates the width of the border */
Border-right: 0px;
Border-top: 3px solid black;
Border-bottom: 3px solid black;
Border-left: 3px solid white;
}
</Style>
</Head>
<Body>
<Div id = "right">
<Span class = "sp1">
<Span class = "sp2"> </span>
</Span>
</Div>
</Body>
</Html>
Conclusion