1. <div class="box">
  2. <div class="right_d"></div>
  3. <span class="back">
  4. <span class="n1"></span>
  5. </span>
  6. <span class="backs">
  7. <span class="n2"></span>
  8. </span>
  9.  
  10. </div>
  1. .box{
  2. border:5px solid #;
  3. border-radius:500px;
  4. width:500px;
  5. height:500px;
  6. position: relative;
  7. overflow:hidden;
  8. }
  9. .back{
  10. background: #;
  11. width: 250px;
  12. height: 250px;
  13. position: absolute;
  14. border-radius: 500px;
  15. left: %;
  16.  
  17. }
  18.  
  19. .backs{
  20. background: #fff;
  21. width: 250px;
  22. height: 250px;
  23. position: absolute;
  24. border-radius: 500px;
  25. left: %;
  26. bottom:;
  27.  
  28. }
  29. .right_d{
  30. background:#;
  31. width:250px;
  32. height:500px;
  33. right:;
  34. position:absolute;
  35. }
  36.  
  37. .n1{
  38. background:#fff;
  39. width:100px;
  40. height:100px;
  41. border-radius:100px;
  42. position:absolute;
  43. top:%;
  44. left:%;
  45. }
  46.  
  47. .n2{
  48. background:#;
  49. width:100px;
  50. height:100px;
  51. border-radius:100px;
  52. position:absolute;
  53. bottom:%;
  54. left:%;
  55. }

Css 八卦的更多相关文章

  1. Matplotlib数据可视化(3):文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

    转自:http://blog.csdn.net/chenhongwu666/article/details/38905803 CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆 ...

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

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

  4. CSS之纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

  5. 用CSS伪类制作一个不断旋转的八卦图?

    前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...

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

    CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...

  7. css实例——“旋转”太极八卦图

    话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  8. css 实现旋转八卦图

    虽然这不算什么亮点,不过也可以供路上的小伙伴学习下 直接上干货: <!doctype html> <html lang="en"> <head> ...

  9. 纯CSS画的基本图形(圆形、三角形、多边形、爱心、八卦等)

    1.圆形 .circle { width: 100px; height: 100px; background: red; border-radius: 50px; } 2.椭圆 .oval { wid ...

随机推荐

  1. 在Qt中将函数发送到主线程执行

    考虑这样一种需求,使用Qt的线程类QThread在后台执行操作(比如说拷贝文件)的时候发生了错误,产生了一个错误信息需要提醒给用户,在后台输出很显然是不够的,因为用户可能根据就没有任何控制台可供程序输 ...

  2. WordPress ‘crypt_private()’方法远程拒绝服务漏洞

    漏洞名称: WordPress ‘crypt_private()’方法远程拒绝服务漏洞 CNNVD编号: CNNVD-201306-250 发布时间: 2013-06-20 更新时间: 2013-06 ...

  3. Python核心编程 练习

    2–9.循环和运算符 创建一个包含五个固定数值的列表或元组,输出他们的平均值.本练习的难点之一是通过除法得到平均值. 你会发现整数除会截去小数,因此你必须使用浮点除以得到更精确的结果. float() ...

  4. MapReduce的reduce函数里的key用的是同一个引用

    最近写MapReduce程序,出现了这么一个问题,程序代码如下: package demo; import java.io.IOException; import java.util.HashMap; ...

  5. Back to Basics: Using KVO

    One of the things I like most about Apple’s iOS SDK is the consistent and easy-to-use API they provi ...

  6. js转码和解码兼容低版本火狐

    function HTMLEncode(html) {                var temp = document.createElement("div");       ...

  7. java垃圾回收算法

    1.标记-清除 2.标记-复制 3.标记-整理 4.分代混合算法

  8. js中widow.open()方法详解

    一. window.open() 支持环境: JavaScript1.0+/JScript1.0+/Nav2+/IE3+/Opera3+ 二.基本语法: window.open(pageURL,nam ...

  9. 查询表达式Linq

    LINQ简介 OO(面向对象)以外的疆域:信息的访问与整合.关系数据库与XML为其中的典型应用. .net Language Integrated Query(Linq):不采用特定关于数据库与XML ...

  10. Activity进入与退出的动画

    1.在res建立目录anim放入动画效果xml文件 1.1   进入文件  push_left_in.xml <?xml version="1.0" encoding=&qu ...