time 
设为首页】【收藏本站
当前位置: 主页 > WEB教程 > Html教程 > 【HTML5实践教程】17、使用css3创建三角形和3D四面体实例

【HTML5实践教程】17、使用css3创建三角形和3D四面体实例

时间:2012-12-31 23:41 点击:2001次 字体:[ ]




  今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。原文地址:http://www.paulrhayes.com/2010-10/css-tetrahedron/

  demo预览地址:http://www.paulrhayes.com/experiments/pyramid/

  首先要和大家分享的是,如何使用div+css创建三角形。在这里我先把相关代码粘贴出来,然后再为大家讲解原理。

  html:

  1. <div id="pyramid"> 
  2.     <div></div> 
  3. </div> 

  css:

  1. <style type="text/css"> 
  2.     #pyramid { 
  3.         position: relative; 
  4.         margin: 100px auto; 
  5.         height: 500px; 
  6.         width: 100px; 
  7.     } 
  8.     #pyramid > div { 
  9.         position: absolute; 
  10.         border-style: solid; 
  11.         border-width: 200px 0 200px 346px; 
  12.     } 
  13.     #pyramid > div:after { 
  14.         position: absolute; 
  15.         content: "Triangle"; 
  16.         color: #fff; 
  17.         left: -250px; 
  18.         text-align: center; 
  19.     } 
  20.     #pyramid > div:first-child  { 
  21.         border-color: #ff0000 transparent #ff0000 rgba(50, 50, 50, 0.6); 
  22.     } 
  23. </style> 

  运行效果:

【HTML5实践教程】17、使用css3创建三角形和3D四面体实例_www.fengfly.com

  原理解析:

  html代码中我们定义了两个div,外部div是容器对象,内部div用来生成三角形。css代码中,我们没有为内部div设置宽度和高度,只设置了border三个边的宽度(上、下和左)。通过为三个边设置不同颜色,他们会分别变成三个不同的三角形。

  这时,我们只需要简单的将上下两边的颜色设置为透明色,一个等边三角形就出现了。



本文地址 : http://www.fengfly.com/plus/view-211244-1.html
标签: CSS3 HTML5 实例 实践教程 三角形 3D四面体
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: