HTML5资讯

当前位置: HTML5技术网 > HTML5资讯 > 纯 CSS 绘制三角形(各种角度)

纯 CSS 绘制三角形(各种角度)

      我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来。
  今天这篇文章开始推出《百变 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 绘制三角形(各种角度)】相关文章

1. 纯 CSS 绘制三角形(各种角度)

2. 纯 CSS 绘制图形(各种形状的砖石)

3. CSS QUIZ: 带边 BORDER 的三角形

4. 如何使用CSS生成一个三角形?

5. 用HTML5画一个3D的三角形网格

6. 纯 CSS 绘制基本图形(圆、椭圆等)

7. 纯 CSS 绘制图形(心形、六边形等)

8. 纯 CSS 绘制各种图形

9. 美国智能机市场状况分析(2011年第三季度)

10. 从SEO的角度剖析HTML5手艺的三个刷新

本文来源:https://www.51html5.com/a3464.html

点击展开全部

﹝纯 CSS 绘制三角形(各种角度)﹞相关内容

「纯 CSS 绘制三角形(各种角度)」相关专题

其它栏目

也许您还喜欢