<!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. takes 3 positional arguments but 4 were given错误

    之前写程序经常会碰到此类问题,确认发现并没有少参数.后来恍然大悟:函数为类下函数,定义时需要添加self参数. 但是!但是!为何Python给self赋值而你不必给self赋值? 创建了一个类MyCl ...

  2. 【Spring】DispatcherServlet源码分析

    使用过HttpServlet的都应该用过其doGet和doPost方法,接下来看看DispatcherServlet对这两个方法的实现(源码在DispatcherServlet的父类Framework ...

  3. 聊一聊Javasript继承

      前前后后已经快写了2年左右javaScript,刚开始只是简单用于一些表单验证和操作dom节点,并没有深入的使用,随着渐渐的深入,开始不想去写重复的代码(懒的开始),从而写简单的继承,封装,抽象等 ...

  4. Java入门篇（一）——如何编写一个简单的Java程序

    最近准备花费很长一段时间写一些关于Java的从入门到进阶再到项目开发的教程,希望对初学Java的朋友们有所帮助,更快的融入Java的学习之中. 主要内容包括JavaSE.JavaEE的基础知识以及如何 ...

  5. HDU1097-A hard puzzle-快速幂+取模

    快速幂: 代码: kuaisumi(ll a,ll b){      ll ans=;      while(b){          ==){              ans=ans*a;     ...

  6. C语言单向链表

    1,为什么要用到链表 数组作为存放同类数据的集合,给我们在程序设计时带来很多的方便,增加了灵活性.但数组也同样存在一些弊病.如数组的大小在定义时要事先规定,不能在程序中进行调整,这样一来,在程序设计中 ...

  7. virtualbox虚拟机NAT模式下不能连接外网

    背景 给VirtualBox虚拟机(装载了Ubuntu16.04系统)配置了两张网卡,网络模式分别为"网络地址转换(NAT)"和"仅主机(Host-Only)适配器&qu ...

  8. 如何让低版本IE浏览器支持HTML5标签并为其设置样式

    现代的浏览器都支持HTML5,HTML5定义了 8 个新的 HTML 语义元素.所有这些元素都是 块级 元素. 为了能让旧版本的浏览器正确显示这些元素,你可以设置 CSS 的 display 属性值为 ...

  9. HDU 5122 K.Bro Sorting(模拟——思维题详解)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5122 Problem Description Matt's friend K.Bro is an A ...

  10. Oracle_索引

    Oracle_索引 索引类似字典的和课本目录,是为了加快对数据的搜索速度而设立的.索引有自己专门的存储空间,与表独立存放. 索引的作用:在数据库中用来加速对表的查询,通过使用快速路径访问方法快速定位数 ...