用CSS实现阴阳八卦图等图形

CSS还是比较强大的,可以实现中国古典的“阴阳八卦图”等形状。

正方形


  #rectangle {
      width: 200px;
      height: 100px;
      backgrount-color: red;
  }  #circle {
      width: 100px;
      height: 100px;
      -webkit-border-radius: 100px;
         -moz-border-radius: 100px;
              border-radius: 100px;
      background-color: red;
  }

椭圆

  #triangle-up {
       width: 0;
       height: 0;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 100px solid red;
  }

直角三角形

直角边left-top
  #triangle-leftbottom {
       width: 0;
       height: 0;
       border-left: 100px solid red;
       border-top: 100px solid transparent;
  }
直角边right-top
  #triangle-righttop {
       width: 0;
       height: 0;
       border-right: 100px solid red;
       border-top: 100px solid transparent;
  }

梯形

  #parallelogram {
       width: 150px;
       height: 100px;
       -webkit-transform: skew(20deg);
          -moz-transform: skew(20deg);
               transform: skew(20deg);
       background: red;
  }

鸡蛋

  #yin-yang {
       width: 96px;
       height: 48px;
       background: #eee;
       border-color: red;
       border-style: solid;
       border-width: 2px 2px 55px 2px;
       border-radius: 100%;
       position: relative;
  }

  #yin-yang:before {
       content: "";
       position: absolute;
       top: 50%;
       left: 0;
       background: #eee;
       border: 18px solid red;
       border-radius: 100%;
       width: 12px;
       height: 12px;
  }

  #yin-yang:after {
       content: "";
       position: absolute;
       top: 50%;
       left: 50%;
       background: red;
       border: 18px solid #eee;
       border-radius:100%;
       width: 12px;
       height: 12px;
  }
八卦图展示不出来,蛋疼,请下载HTML文件 http://download.csdn.net/detail/huoyingfans/7455161或者 去 http://blog.fansunion.cn/articles/3736 查看
更多文章请参考:http://www.itfriend.cn/user/FansUnion

用CSS实现阴阳八卦图等图形

时间: 2024-10-10 20:42:01

用CSS实现阴阳八卦图等图形的相关文章

使用CSS达到阴阳八卦图等图形

CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-color: red; } #circle { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background-color: red; }

使用CSS3生成一个会旋转的太极八卦图

学习了CSS3 后,可以做出很多炫酷的效果,但是基本功需要打扎实,就从学习使用纯CSS技术生成太极八卦图学起. 第一步,先使用HTML进行一下简单的布局,如下,只需要一个DIV即可: <body> <div></div> </body> 第二步,插入了DIV之后, 就需要为其添加样式,以及设置其为圆形,我们宽要设置的是高的2倍,这样在为底边框添加了宽度后,保证DIV出来后是圆形,如下: div { width:500px; height:250px; bor

jqPlot图表插件学习之阴阳烛图

一.准备工作 首先我们需要到官网下载所需的文件: 官网下载(笔者选择的是jquery.jqplot.1.0.8r1250.zip这个版本) 然后读者需要根据自己的情况新建一个项目并且按照如下的方式加载对应的js和css(因为笔者在VS2012环境下新建的,并且所需的js和css都会对应的放到js和css文件夹下,请读者根据自己的情况修正加载的路径). 1 <link href="css/jquery.jqplot.min.css" rel="stylesheet&quo

算法生成太极八卦图

前面一篇文章是通过算法生成一幅太极图,有道是:无极生太极,太极生两仪,两仪生四象,四象生八卦.那么这一节就为太极生成一个八卦图.虽然我对易经这种玄之又玄的哲学没什么研究,但至少八卦可以看做是二进制的鼻祖.愿太极八卦保佑我们的程序绝无BUG,永不修改. 根据二进制数的规定:有,用1表示;无,用0表示.我们可以得出八卦各卦阳爻和阴爻的二进制数.下面我们写出八卦各卦阳爻的二进制数(即有阳爻为1,无阳爻为0): 坤:黑黑黑,卦符阴阴阴,二进制数为000 艮:黑黑白,卦符阴阴阳,二进制数为001 坎:黑白

用h5中的canvas 绘制八卦图

1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>canvas绘制八卦图</title> 6 </head> 7 8 <body> 9 <canvas id="canvas" width="600" height="500"><

CSS Sprite 雪碧图制作

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的. 一个例子,可以复制然后看一下效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

less css用法思维导图

Less 是一个Css 预编译器,可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性. 关于其具体用法,根据大漠文章,笔者总结如下: 放大局部后的截图:(空间有限,所以隐藏了所有的实例代码演示) 还有一点很重要: 下面结合自己的练习过程,具体叙述: 1:文件目录情况: 在客户端使用时候要这样引入HTML结构中: 注意:“Less样式文件一定要放在less脚本文件之前”. 2:源代

Tweetable Mathematical Art 太极八卦图

从Matrix67 blog里面看到了Tweetable Mathematical Art. 使用C++实现3个函数RD(i, j), GR(i, j), BL(i, j)分别返回像素(i, j)的R/G/B值,最终生成1幅1024*1024的图片.要求是每个函数代码不超过140字符,即Tweetable. 来个太极八卦图,娱乐一下. unsigned char RD(int i,int j){ // YOUR CODE HERE #define LEFT (i < DIM/2) #define

CSS Sprite雪碧图应用

CSS Sprite CSS雪碧图 为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 雪碧图使用场景: 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小 3.加载数量比较大 4.一些大图不建议拼成雪碧图 (减少HTTP请求数,加速内容显示) 雪碧图实现原理:background-position 移动位置时,坐标都需要设置成负值 雪碧图生成方式 1.PS手动拼图 2.大项目通常使用