Css三角形的画法-多种形式
灵活使用css画图,熟练使用代码
css三角形的画法
三角形画法
左上角直角三角形
查看代码
1 | .box-up{ |
- 扩展 - 改变top/right的值,使三角形的边发生改变
- 右上角,左下角,右下角同理
使用css三角形画平行四边形
查看代码
- 有多种画法,巧妙使用浮动,定位
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.box-p{
width: 200px;
height: 100px;
margin: 50px auto;
background-color: #888;
position:relative;
}
.box-p i{
position: absolute;
width: 0;
height: 0;
left: -50px;
border-bottom: 100px solid #888;
border-left: 50px solid transparent;
}
.box-p span{
position: absolute;
width: 0;
height: 0;
right: 0;
border-bottom: 100px solid #fff;
border-left: 50px solid #888;
} - 第二种简单的画法
1 | width: 150px; |
使用三角形画六边形有多种画法
- 第一种我使用了定位的画法,思路两个三角形
查看代码
- 画法,由上下俩个三角形组成
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.star-six2 {
width: 300px;
height: 300px;
margin: 10px auto;
position: relative;
}
.star-six2 p {
position: absolute;
width: 0;
height: 0;
border-top: 80px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
}
.star-six2 span {
position: absolute;
width: 0;
height: 0;
border-bottom: 80px solid red;
border-right: 50px solid transparent;
border-left: 50px solid transparent;
top: -25px;
} - 第二种使用伪元素法构造
1 | .star-six { |
使用css画八卦图
查看代码
- 思路:正方形+两个长方形+两个正方形组成
- 思路二:一个大的正方形(或者两个长方形)+两个正方形(使用border-radius增大他们的外边距
1 | .bagua { |
- 使用伪元素画法
1 | .bagua2 { |
查看效果
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Harry の 心 阁!
评论