First of all, it is an arbitrary empty tag to use as a small triangle, and the CSS below can be lost:
| The code is as follows: |
Copy code |
. Triangle {
Left: 50%;
Margin-left:-5px;
Width: 5px;
Height: 5px;
Background: # FAFAFA;
Bottom:-4px;
Position: absolute;
Transform: rotate (45deg );
-Ms-transform: rotate (45deg );
-Moz-transform: rotate (45deg );
-Webkit-transform: rotate (45deg );
-O-transform: rotate (45deg );
Border: 1px solid # E5E5E5;
Border-top: none;
Border-left: none
} |
The code uses the 2D rotation attribute of CSS3 to rotate the square, and hides the border between the left and right sides of the top to implement a small triangle.
Example
| The code is as follows: |
Copy code |
<! Doctype html>
<Html>
<Head>
<Meta charset = "UTF-8">
<Script type = "text/javascript" src = "/libs/jquery/1.4.4/jquery. min. js"> </script>
<Title> three methods to implement triangles using pure CSS </title>
<Link rel = "stylesheet">
<Style type = "text/css">
. Page-info {padding: 8px 15px; background: # fcea9e; border-bottom: 1px solid # b6bac0; font: normal 16px Georgia ;}
. Page-info h1 {float: left ;}
. Page-info a {font-weight: bold; color: #222 ;}
. Return-article {float: right ;}
. Return-article h2 {display: inline ;} /* Simulate tips with border */
. Message-box {position: relative; float: left; margin: 80px 0 0 100px; width: 240px; height: 60px; line-height: 60px; background: # E9FBE4; box-shadow: 1px 2px 3px # E9FBE4; border: 1px solid # C9E9C0; border-radius: 4px; text-align: center; color: #0C7823 ;}
. Triangle-border {position: absolute; left: 30px; overflow: hidden; width: 0; height: 0; border-width: 10px; border-style: solid dashed ;}
. Tb-border {bottom:-20px; border-color: # C9E9C0 transparent ;}
. Tb-background {bottom:-19px; border-color: # E9FBE4 transparent ;} /* Simulate tips */
. Triangle-character {position: absolute; left: 30px; overflow: hidden; width: 26px; height: 26px; font: normal 26px "";}
. Tc-background {bottom:-12px; color: # E9FBE4 ;}
. Tc-border {bottom:-13px; color: # C9E9C0 ;} /* Css3 transfrom tips simulation */
. Triangle-css3 {position: absolute; bottom:-8px; bottom:-6px; left: 30px; overflow: hidden; width: 13px; height: 13px; background: # E9FBE4; border-bottom: 1px solid # C9E9C0; border-right: 1px solid # C9E9C0 ;}
. Transform {-webkit-transform: rotate (45deg);-moz-transform: rotate (45deg);-o-transform: rotate (45deg); transform: rotate (45deg );}
/* Ie7-9 */
. Ie-transform-filter {
-Ms-filter: "progid: DXImageTransform. Microsoft. Matrix (M11 = 0.7071067811865475, M12 =-0.7071067811865477, M21 = 0.7071067811865477, M22 = 0.7071067811865475, SizingMethod = 'autoexpand ')";
Filter: progid: DXImageTransform. Microsoft. Matrix (M11 = 0.7071067811865475, M12 =-0.7071067811865477, M21 = 0.7071067811865477, M22 = 0.7071067811865475, SizingMethod = 'autoexpand ');
}
</Style>
</Head>
<Body>
<Div class = "message-box">
<Span> I implemented it using the border attribute </span>
<Div class = "triangle-border tb-border"> </div>
<Div class = "triangle-border tb-background"> </div>
</Div> <Div class = "message-box">
<Span> I use ◆ characters </span>
<Div class = "triangle-character tc-border"> ◆ </div>
<Div class = "triangle-character tc-background"> ◆ </div>
</Div> <Div class = "message-box">
<Span> I implemented it using the css transfrom attribute </span>
<Div class = "triangle-css3 transform ie-transform-filter"> </div>
</Div> </Body>
</Html> |
