CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
来源:互联网 发布:淘宝开店协议无法同意 编辑:程序博客网 时间:2024/05/17 07:39
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。
今天这篇文章开始推出《百变 CSS 系列》,给大家带来 CSS 在网页中以及图形绘制中的使用。首先给大家打来的是流行的 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
;
}
0 0
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(各种角度)
- 纯正CSS绘制三角形(各种角度)
- 纯CSS绘制三角形(多个角度)
- 纯CSS绘制三角形(多个角度)
- css绘制各种角度三角形方法
- CSS:纯CSS绘制三角形(原理)
- 纯css绘制三角形
- 并查集
- 技术宅,改变世界!
- Android广播机制
- C 野指针
- Python uuid模块
- CSS 魔法系列:纯 CSS 绘制三角形(各种角度)
- PHP 对数组进行压缩编码, 哪种最好?(php几种压缩方式的对比)
- [leetcode-96]Unique Binary Search Trees(c++)
- 解决c/c++的sequence points和side effects问题
- 互联网MySQL开发规范
- HDU 5059\BC 12B Help him
- Steps 数论水题
- 排序专题之归并排序
- Linux 数据库学习的准备工作---开发环境的配置codeblocks