CSS-三角形及其原理

简介:

CSS中三角形在网页中比较常见,以前是图片,不过现在基本上都是通过CSS可以完成,实现比较简单,我们可以看一组简单的三角形效果:

其实实现起来比较简单,通过空div然后设置宽高为0,之后可以四周border的宽度,控制三角形的形状,四个border可以看成是两横横竖的木头的重叠的效果,两横在两竖上面,三角形就是中间重叠的部分切分出来的,样式的代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.triangle {
     width: 0;
     height: 0;
     border-top: 20px solid #EEB422;
     border-right: 20px solid #C0FF3E;
     border-bottom: 20px solid #A020F0;
     border-left: 20px solid #7CFC00;
}
 
.triangle-up {
     width: 0;
     height: 0;
     border-right: 20px solid transparent;
     border-bottom: 40px solid #A020F0;
     border-left: 20px solid transparent;
}
 
.triangle-down {
     width: 0;
     height: 0;
     border-top: 40px solid #EEB422;
     border-right: 20px solid transparent;
     border-left: 20px solid transparent;
}
 
.triangle-left {
     width: 0;
     height: 0;
     border-top: 20px solid transparent;
     border-bottom: 20px solid transparent;
     border-left: 40px solid #7CFC00;
}
 
.triangle-right {
     width: 0;
     height: 0;
     border-top: 20px solid transparent;
     border-bottom: 20px solid transparent;
     border-right: 40px solid #C0FF3E;
}
 
.triangle-left-bottom {
     width: 0;
     height: 0;
     border-top: 40px solid transparent;
     border-left: 40px solid #7CFC00;
}
 
.triangle-right-bottom {
     width: 0;
     height: 0;
     border-top: 40px solid transparent;
     border-right: 40px solid #C0FF3E;
}

具体的html页面代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
< div  class="row">
     < span >四个三角</ span >
     < div  class="triangle">
     </ div >
</ div >
< div  class="row">
     < span >上三角</ span >
     < div  class="triangle-up">
     </ div >
</ div >
< div  class="row">
     < span >下三角</ span >
     < div  class="triangle-down">
     </ div >
</ div >
< div  class="row">
     < span >左三角</ span >
     < div  class="triangle-left">
     </ div >
</ div >
< div  class="row">
     < span >右三角</ span >
     < div  class="triangle-right">
     </ div >
</ div >
< div  class="row">
     < span >左下角</ span >
     < div  class="triangle-left-bottom">
     </ div >
</ div >
< div  class="row">
     < span >右下角</ span >
     < div  class="triangle-right-bottom">
     </ div >
</ div >
< p >博客园-FlyElephant:http://www.cnblogs.com/xiaofeixiang/</ p >
本文转自Fly_Elephant博客园博客,原文链接:http://www.cnblogs.com/xiaofeixiang/p/5022570.html,如需转载请自行联系原作者
相关文章
|
1月前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
1月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
37 3
|
1月前
|
前端开发
玩转CSS盒子之 三角形盒子
玩转CSS盒子之 三角形盒子
37 0
|
7月前
|
前端开发
如何用CSS 画一个三角形?
如何用CSS 画一个三角形?
46 0
|
1月前
|
前端开发
CSS外边距重叠:原理、结果
CSS外边距重叠:原理、结果
16 1
|
1月前
|
前端开发 JavaScript
用CSS画图——从三角形到吃豆人
用CSS画图——从三角形到吃豆人
|
1月前
|
前端开发 JavaScript
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
前端 富文本编辑器原理——从javascript、html、css开始入门
66 0
前端 富文本编辑器原理——从javascript、html、css开始入门(二)
|
1月前
|
Web App开发 前端开发 iOS开发
CSS3 转换,深入理解Flutter动画原理,前端基础图形
CSS3 转换,深入理解Flutter动画原理,前端基础图形
|
1月前
|
前端开发 JavaScript 索引
前端 富文本编辑器原理——从javascript、html、css开始入门(一)
前端 富文本编辑器原理——从javascript、html、css开始入门
57 0
|
1月前
|
前端开发
CSS外边距重叠:原理、结果
CSS外边距重叠:原理、结果
23 0