转自:http://www.cnblogs.com/lhb25/p/css-and-css3-triangle.html
CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。
Triangle Up
1
2
3
4
5
6
7
|
#triangle-up {
width
:
0
;
height
:
0
;
border-left
:
50px
solid
transparent
;
border-right
:
50px
solid
transparent
;
border-bottom
:
100px
solid
red
;
}
|
Triangle Down
1
2
3
4
5
6
7
|
#triangle-down {
width
:
0
;
height
:
0
;
border-left
:
50px
solid
transparent
;
border-right
:
50px
solid
transparent
;
border-top
:
100px
solid
red
;
}
|
Triangle Left
1
2
3
4
5
6
7
|
#triangle-
left
{
width
:
0
;
height
:
0
;
border-top
:
50px
solid
transparent
;
border-right
:
100px
solid
red
;
border-bottom
:
50px
solid
transparent
;
}
|
Triangle Right
1
2
3
4
5
6
7
|
#triangle-
right
{
width
:
0
;
height
:
0
;
border-top
:
50px
solid
transparent
;
border-left
:
100px
solid
red
;
border-bottom
:
50px
solid
transparent
;
}
|
Triangle Top Left
1
2
3
4
5
6
|
#triangle-topleft {
width
:
0
;
height
:
0
;
border-top
:
100px
solid
red
;
border-right
:
100px
solid
transparent
;
}
|
Triangle Top Right
1
2
3
4
5
6
7
|
#triangle-topright {
width
:
0
;
height
:
0
;
border-top
:
100px
solid
red
;
border-left
:
100px
solid
transparent
;
}
|
Triangle Bottom Left
1
2
3
4
5
6
|
#triangle-bottomleft {
width
:
0
;
height
:
0
;
border-bottom
:
100px
solid
red
;
border-right
:
100px
solid
transparent
;
}
|
Triangle Bottom Right
1
2
3
4
5
6
|
#triangle-bottomright {
width
:
0
;
height
:
0
;
border-bottom
:
100px
solid
red
;
border-left
:
100px
solid
transparent
;
}
|