<!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. 一个通用的Makefile（二）

    1.各级子目录的Makefile: obj-y += file.o obj-y += subdir/ “obj-y += file.o” 表示把当前目录下的file.c编进程序里. “obj-y += ...

  2. window下mySql数据库设置密码

    方法一:用setpassword命令 首先登陆MySQL:mysql -u root 格式:mysql> set password for 用户名@localhost = password('新 ...

  3. Zabbix实战-简易教程（3）--DB安装和表分区

    一.DB安装环境 主机角色 主机IP VIP 操作系统版本 软件版本 DB Master A 192.168.1.97 (主从) CentOS 6.5 64bit mysql-5.6.21 DB Sl ...

  4. 关于构造函数和原型prototype对象的理解

    构造函数     1.什么是构造函数 构造函数,主要用于对象创建的初始化,和new运算符一起用于创建对象,一个类可以有多个构造函数,因为函数名相同,所以只能通过参数的个数和类型不同进行区分,即构造函数 ...

  5. HUST 1555 A Math Homework

    1555 - A Math Homework 时间限制:1秒 内存限制:128兆 338 次提交 131 次通过 题目描述     QKL is a poor and busy guy, and he ...

  6. 2017广东工业大学程序设计竞赛决赛 题解&源码(A,数学解方程，B,贪心博弈，C,递归，D,水，E,贪心，面试题，F,贪心，枚举，LCA，G,dp，记忆化搜索，H,思维题)

    心得: 这比赛真的是不要不要的,pending了一下午,也不知道对错,直接做过去就是了,也没有管太多! Problem A: 两只老虎 Description 来,我们先来放松下,听听儿歌,一起“唱” ...

  7. Gym100971B Gym100971C Gym100971F Gym100971G Gym100971K Gym100971L(都是好写的题。。。) IX Samara Regional Intercollegiate Programming Contest Russia, Samara, March 13, 2016

    昨天训练打的Gym,今天写题解. Gym100971B 这个题就是输出的时候有点小问题,其他的都很简单. 总之,emnnn,简单题. 代码: #include<iostream> #inc ...

  8. eclipse(Version: Mars.2 Release (4.5.2)) groovy plugin install process.

    There are two way to install : First: 1.check your eclipse version:Help-->About Eclipse 2.open He ...

  9. Newbit 启用淘宝店域名

    自2016-10-19起,我们正式启用淘宝店的域名,newbit.taobao.com 店里提供所有课程当中用到硬件,ZigBee插件/贴片模块等, 我们将坚持给大家提供最具扩展性,最方便使用的开发工 ...

  10. 查看三种MySQL字符集的方法

    查看MySQL字符集的命令是我们经常会使用到的,下文就介绍了其中的三种查看MySQL字符集的命令,供您参考学习. 作者:佚名来源:互联网|2010-10-09 11:36 移动端 收藏 分享 CTO训 ...