css3 画太极图——用一个div实现

＊且听风吟

已于 2023-03-30 18:28:17 修改

阅读量795

点赞数 2

分类专栏： # CSS 文章标签： css3 css javascript

于 2019-10-21 19:17:01 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/102669936

版权

CSS 专栏收录该内容

55 篇文章 5 订阅

订阅专栏

（1）绘制两个半圆：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css 绘制太极图</title>
    <style class="cp-pen-styles">
       *{
           padding:0;
           margin:0;
       }
       .outer{
           margin:100px auto;
           width:0;
           height:500px;
           border-radius: 500px;
           position:relative;
           border-left:250px solid black;
		   border-right:250px solid white;
		   box-shadow:0 0 30px #D3D3D3;
       }
    </style>
</head>
<body>
<div class="outer">
</div>
</body>
</html>

在这里插入图片描述
（2）绘制上面的圆：

	.outer:after{
           width:250px;
           height:250px;
           position:absolute;
		   left:-125px;
		   display:block;
		   content:"";
           z-index:1;
		   background-color:white;
		   border-radius:50%;
   }

在这里插入图片描述
（3）绘制下面的圆：

	.outer:after{
           width:250px;
           height:250px;
           position:absolute;
		   left:-125px;
		   display:block;
		   content:"";
           z-index:1;
		   background-color:white;
		   border-radius:50%;
		   box-shadow:0 250px 0 black;
   }

在这里插入图片描述
（4）绘制上面的小圆：

	.outer:before {
			content:"";
            position:absolute;
            display: block;
            width:100px;
            height:100px;
            top:75px;
            left:-50px;
            z-index:2;
            background-color:black;
            border-radius:50%;
	}

在这里插入图片描述
（5）绘制下面的小圆：

	.outer:before {
			content:"";
            position:absolute;
            display: block;
            width:100px;
            height:100px;
            top:75px;
            left:-50px;
            z-index:2;
            background-color:black;
            border-radius:50%;
			box-shadow:0 250px 0 white;
	}

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css 绘制太极图</title>
    <style class="cp-pen-styles">
       *{
           padding:0;
           margin:0;
       }
       .outer{
           margin:100px auto;
           width:0;
           height:500px;
           border-radius: 500px;
           position:relative;
           border-left:250px solid black;
		   border-right:250px solid white;
		   box-shadow:0 0 30px #D3D3D3;
       }
	   .outer:after{
           width:250px;
           height:250px;
           position:absolute;
		   left:-125px;
		   display:block;
		   content:"";
           z-index:1;
		   background-color:white;
		   border-radius:50%;
		   box-shadow:0 250px 0 black;
       }
	   .outer:before {
			content:"";
            position:absolute;
            display: block;
            width:100px;
            height:100px;
            top:75px;
            left:-50px;
            z-index:2;
            background-color:black;
            border-radius:50%;
			box-shadow:0 250px 0 white;
	   }
    </style>
</head>
<body>
<div class="outer">
</div>
</body>
</html>