<!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. Python 集合 深浅copy

    一,集合. 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. ...

  2. 【个人笔记】《知了堂》ajax的get及post请求

    ajax 执行步骤 // 步骤 设置事件 调用函数 创建一个XHR对象 打开ajax通道,链接服务器,配置请求信息和参数 发送数据 设置回调函数 服务器接受请求,处理请求,查询数据库,响应 及 返回数 ...

  3. cs231n spring 2017 Python/Numpy基础 (1)

    本文使根据CS231n的讲义整理而成(http://cs231n.github.io/python-numpy-tutorial/),以下内容基于Python3. 1. 基本数据类型:可以用 prin ...

  4. Uva 11300 Spreading the Wealth(递推，中位数)

    Spreading the Wealth Problem A Communist regime is trying to redistribute wealth in a village. They ...

  5. [hdu5632][BC#73 1002]Rikka with Array

    点开BC发现今晚没比赛..然后似乎上一场有数位DP?...(幸好我没去 一开始被BCDcode那题的思路带歪了..后来发现得把n转成二进制才能搞TAT 题目大概是要求一种类似逆序对的鬼东西: 有一个长 ...

  6. c++(排序二叉树插入)

    二叉树的节点插入比较简单.一般来说,二叉树的插入主要分为以下两个步骤: 1) 对当前的参数进行判断,因为需要考虑到头结点,所以我们使用了指针的指针作为函数的输入参数 2) 分情况讨论: 如果原来二叉树 ...

  7. Coins、Tokens、山寨币：区别在哪里

    [译] Coins, Tokens & Altcoins: What's the Difference? coin:指"正宗的"数字货币,比如比特币 tokens:比如用 ...

  8. 在vue-cli项目中使用echarts

    这个示例使用 vue-cli 脚手架搭建 安装echarts依赖 npm install echarts -S 或者使用国内的淘宝镜像: 安装 npm install -g cnpm --regist ...

  9. vmstat & mpstat & w

    vmstat # vmstat 3 2procs -----------memory---------- ---swap-- -----io---- --system-- -----cpu----- ...

  10. HTML meta refresh 刷新与跳转(重定向)页面

    下面为各位整理了一些HTML meta refresh 刷新与跳转(重定向)页面的例子吧,后面本站长自己也补充了一些js页面刷新与跳转例子吧. refresh 属性值  --  刷新与跳转(重定向)页 ...