纯 CSS 绘制三角形(各种角度)
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。
今天这篇文章开始推出《百变 CSS 系列》,给大家带来 CSS 在网页中以及图形绘制中的使用。首先给大家打来的是流行的 CSS 三角形绘制方法。
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;}
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;}
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent;}
#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent;}
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
实现原理动画演示(点击这里)
今天这篇文章开始推出《百变 CSS 系列》,给大家带来 CSS 在网页中以及图形绘制中的使用。首先给大家打来的是流行的 CSS 三角形绘制方法。
Triangle Up
#triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red;}
Triangle Down
#triangle-down { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-top: 100px solid red;}
Triangle Left
#triangle-left { width: 0; height: 0; border-top: 50px solid transparent; border-right: 100px solid red; border-bottom: 50px solid transparent;}
Triangle Right
#triangle-right { width: 0; height: 0; border-top: 50px solid transparent; border-left: 100px solid red; border-bottom: 50px solid transparent;}
Triangle Top Left
#triangle-topleft { width: 0; height: 0; border-top: 100px solid red; border-right: 100px solid transparent;}
Triangle Top Right
#triangle-topright { width: 0; height: 0; border-top: 100px solid red; border-left: 100px solid transparent; }
Triangle Bottom Left
#triangle-bottomleft { width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;}Triangle Bottom Right
#triangle-bottomright { width: 0; height: 0; border-bottom: 100px solid red; border-left: 100px solid transparent;}实现原理动画演示(点击这里)
【纯 CSS 绘制三角形(各种角度)】相关文章
8. 纯 CSS 绘制各种图形
本文来源:https://www.51html5.com/a3464.html
上一篇:自动判断网络连接状态并提醒用户
下一篇:帮助更语义化的显示时间的jQuery插件
﹝纯 CSS 绘制三角形(各种角度)﹞相关内容
- CSS里的各种水平垂直居中基础写法心得
- 创意无限:纯CSS打造各种形状钻石
- Magic CSS3 – 创建各种神奇的交互动画效果
- Chrome实验网站:各种新奇事物让你爱不释手
- 2014年各种编程语言的薪资和市场需求
- 用CSS3绘制新浪微博logo
- CSS3绘制的腾讯QQ企鹅Logo
- [视频]纯CSS3腾讯QQ企鹅(附绘制过程)
- HTML5每日一练之Canvas标签的应用-绘制径向渐变图形
- HTML5每日一练之Canvas标签的应用-绘制坐标变换图形