The following figure shows the effect.
Triangle direction "width: 0 ",
The reverse direction is the triangle height (20) "border-width: 20px ",
The reverse color is the triangle color "border-color: # eee ",
Add the other two directions to the triangle width (30) "border-width: 15px"
CSS:
| The code is as follows: |
Copy code |
Span {
Position: absolute;
Width: 0;
Height: 0;
Border-width: 0 15px 20px 15px;
Border-style: solid;
Border-color: transparent # eee transparent;
Top:-20px;
Left: 50%;
Margin-left:-15px;
} |
Example
| The code is as follows: |
Copy code |
<! DOCTYPE html>
<Html> www.111cn.net
<Head>
<Title> Arbitrary triangle </title>
<Style>
Div {
Width: 200px;
Height: 60px;
Background-color: # eee;
Position: absolute;
Left: 50%;
Margin-left:-150px;
Margin-top:-50px;
Top: 50%;
Border-radius: 10px;
Float: left;
Font: 12px/20px "";
Color: #000;
Padding: 20px 50px;
}
Span {
Position: absolute;
Top:-20px;
Width: 0;
Height: 0;
Border-width: 0 15px 20px 15px;
Border-style: solid;
Border-color: transparent # eee transparent;
Left: 50%;
Margin-left:-15px;
} Www.111cn.net
</Style>
</Head>
<Body>
<Div>
<Span> </span>
The opposite direction of the triangle is "width: 0". The opposite direction is the triangle height. The color is the triangle color. The other two directions are added to the width.
</Div>
</Body>
</Html> |
