用CSS绘制各种角度的三角形
浏览:1138次 出处信息
下面是一些利用CSS中border的特性绘制的各种角度的三角形:
(1)正方形
图1:正方形
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-left: 50px solid gray; border-right : 50px solid green; border-bottom: 50px solid red; border-top : 50px solid yellow; } </style> </head> <body> <div id="triangle"></div> </body> </html>
如上图1,由于设置了width、height都为0了,所以四个点也就归并成了一个点,后面的各种角度的三角形,其实也就是不断调整那个中心点而已。
(2)向上三角
图2:向上三角
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-left: 50px solid transparent; border-right : 50px solid transparent; border-bottom: 100px solid red; } </style> </head> <body> <div id="triangle"></div> </body> </html>
(3)向下三角
图3:向下三角
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-left: 50px solid transparent; border-right : 50px solid transparent; border-top: 100px solid red; } </style> </head> <body> <div id="triangle"></div> </body> </html>
(4)向左三角
图4:向左三角
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-right: 100px solid red; border-top : 50px solid transparent; border-bottom: 50px solid transparent; } </style> </head> <body> <div id="triangle"></div> </body> </html>
(5)向右三角
图5:向右三角
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-left: 100px solid red; border-top : 50px solid transparent; border-bottom: 50px solid transparent; } </style> </head> <body> <div id="triangle"></div> </body> </html>
(6)左上三角
图6:左上三角
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-top : 100px solid red; border-right: 100px solid transparent; } </style> </head> <body> <div id="triangle"></div> </body> </html>
(7)右上三角
图7:右上三角
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-top : 100px solid red; border-left: 100px solid transparent; } </style> </head> <body> <div id="triangle"></div> </body> </html>
(8)左下三角
图8:左下三角
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-bottom : 100px solid red; border-right: 100px solid transparent; } </style> </head> <body> <div id="triangle"></div> </body> </html>
(9)右下三角
图9:右下三角
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>index</title> <style type="text/css"> #triangle { width : 0; height: 0; border-bottom : 100px solid red; border-left: 100px solid transparent; } </style> </head> <body> <div id="triangle"></div> </body> </html>
建议继续学习:
- 经典证明:任意三角形都能被分成n≥4个等腰三角形 (阅读:4847)
- 能否在等边三角形点阵中画一个正方形? (阅读:4179)
- 三角形变形记之纯css实现的分布导航条效果 (阅读:3514)
- 经典证明:等边三角形内一点到各顶点的距离长可构成一个三角形 (阅读:3168)
- border:none;与border:0;的区别 (阅读:2525)
- borderl:none;与border:0;的区别 (阅读:2077)
- 重温CSS:Border属性 (阅读:1962)
- CSS Border使用小分享 (阅读:1636)
- 网页游戏中的动物世界法则和三角形法则 (阅读:1663)
- 怎样把一个钝角三角形分成若干个锐角三角形 (阅读:1397)
QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
扫一扫订阅我的微信号:IT技术博客大学习
<< 前一篇:理解SVG transform坐标变换
后一篇:CSS中的margin外边距折叠现象 >>
文章信息
- 作者:叶德华的博客 来源: 叶德华的博客
- 标签: border 三角形
- 发布时间:2015-11-08 21:50:23
建议继续学习
近3天十大热文
- [65] Oracle MTS模式下 进程地址与会话信
- [64] Go Reflect 性能
- [64] 如何拿下简短的域名
- [59] IOS安全–浅谈关于IOS加固的几种方法
- [58] 【社会化设计】自我(self)部分――欢迎区
- [58] 图书馆的世界纪录
- [56] android 开发入门
- [53] 视觉调整-设计师 vs. 逻辑
- [46] 读书笔记-壹百度:百度十年千倍的29条法则
- [45] 界面设计速成