<!DOCTYPE html>
<html>
　　<head>
　　　　<meta charset="utf-8">
　　　　<title>Div+Css太极图</title>
　　　　<style type="text/css">
　　　　.circle{
　　　　　　　　width: 100px;
　　　　　　　　height: 50px;
　　　　　　　　border:1px solid black;
　　　　　　　　border-radius: 100px;
　　　　　　　　position:relative;
　　　　　　　　border-bottom:50px solid black;
　　　　　　}
　　　　.circle::before{
　　　　　　　　float:left;
　　　　　　　　content: '';
　　　　　　　　width: 10px;
　　　　　　　　height: 10px;
　　　　　　　　border: 20px solid black;
　　　　　　　　border-radius: 50px;
　　　　　　　　position: relative;
　　　　　　　　top:50%;
　　　　　　　　left:0;
　　　　　　　　background-color:#fff;

　　　　　}
　　　　.circle::after{
　　　　　　　　float:right;
　　　　　　　　content: '';
　　　　　　　　width: 10px;
　　　　　　　　height: 10px;
　　　　　　　　border: 20px solid #fff;
　　　　　　　　border-radius:50px;
　　　　　　　　position: relative;
　　　　　　　　top:50%;
　　　　　　　　left:0;
　　　　　　　　background-color:#000;
　　　　　　}

　　　　</style>
　　</head>
　　<body>
　　　　<div class="circle">

　　　　</div>
　　</body>
</html>

Div+Css画太极图源代码的更多相关文章

  1. div+css画一个小猪佩奇

    用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. HTML部分(全是DIV) <!-- 小猪佩奇整体容器 --> <div class="pig_container&quo ...

  2. div+css 画三角形

            <style type="text/css"> .rightdirection { width:0;height:0; line-height:0; b ...

  3. 传入两坐标点，利用div+css画线

    上样式生成函数代码 lineStyle (x1, y1, x2, y2, lineWidth = 4, color = 'black') { let rectX = x1 < x2 ? x1 : ...

  4. 【二次元的CSS】—— 用 DIV + CSS3 画咸蛋超人（详解步骤）

    [二次元的CSS]—— 用 DIV + CSS3 画咸蛋超人(详解步骤) 2016-05-17 HTML5cn 仅仅使用div作为身体的布局,用css3的各种transform和圆角属性来绘制各部位的 ...

  5. 用纯css画个三角形

    用纯css画个三角形以下是源代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  6. 一步一步教你用CSS画爱心

    今天小颖给大家分享一个用CSS画的爱心,底下有代码和制作过程,希望对大家有所帮助. 第一步: 先画一个正方形.如图: <!DOCTYPE html> <html> <he ...

  7. 参考bootstrap中的popover.js的css画消息弹框

    前段时间小颖的大学同学给小颖发了一张截图,图片类似下面这张图: 小颖当时大概的给她说了下,其实小颖也不知道上面那个三角形怎么画嘻嘻,给她说了DOM结构,具体的css让她自己百度,今天小颖自己参考boo ...

  8. Effective前端3：用CSS画一个三角形

    p { text-indent: 2em } .triangle-container p { text-indent: 0 } img { margin: 15px 0 } 三角形的场景很常见,打开一 ...

  9. 用css画图标

    css3的属性 transform(转换) 用途很广泛,功能也很强大,为了熟悉它的各种转换方式(平移 translate,旋转 rotate,扭曲 skew,放缩 scale),我做了一些平常常用的一 ...

随机推荐

  1. uboot引导linux内核过程详解【转】

    http://blog.chinaunix.net/uid-7828352-id-4472376.html 写的不错,尤其是uboot向linux内核传递参数的过程写的比较详细.

  2. 循序渐进之Spring AOP(4) - Introduction

    前面描述的几种增强(Advice)都是在目标方法范围内织入,而引介(Introduction)不同,直接在类级别上添加目标未实现的接口方法. 在spring中可以通过扩展DelegatingIntro ...

  3. Java泛型集合

    所谓泛型就是允许在定义类.接口时指定类型形参,这个类型形参将在声明变量.创建对象时确定.增加了泛型支持后的集合,完全可以记住集合 中元素的类型,并可以在编译时检查集合中元素的类型.即解决一些安全问题, ...

  4. 【JavaScript随机生成验证码及其颜色】

    css样式: <style type="text/css"> /*给验证码设一个盒子*/ #yzm{ width: 120px; height: 50px; text- ...

  5. Java面向对象接口的应用实例练习

    interface USB { public void open(); public void close(); } class Upan implements USB { public void o ...

  6. [bzoj3953] [WF2013]Self-Assembly

    将正方形视为连接字符间的边.比方说正方形上存在A+,B-,就从A-往B+连边,表示字符可以通过这个正方形进行变换. 如果能构成环的话就可以无穷大了...判环随便写个拓扑什么的... #include& ...

  7. NEFU_117素数个数的位数

    题目传送门:点击打开链接 Problem : 117 Time Limit : 1000ms Memory Limit : 65536K description 小明是一个聪明的孩子,对数论有着很浓烈 ...

  8. float浮动属性的基本常识

    CSS 浮动 请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边 ...

  9. JAVA开发中遇到的异常总结

    最常见的五种异常:必会,面试题: 算术异常类:ArithmeticExecption 空指针异常类:NullPointerException 类型强制转换异常:ClassCastException 数 ...

  10. UE4 unreliable 同步问题

    今天发现了一个问题,标记为unreliable的函数从来不执行,但是官方文档上的说明是只有在网络负载重时才不执行此类函数,哎哎哎.