HTML+CSS画太极图

达达学前端

于 2022-06-21 18:13:30 发布

阅读量291

点赞数

分类专栏： html css 文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_55965566/article/details/125396207

版权

css 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .all{width: 800px;height: 800px;border: 1px solid black;border-radius: 400px;}
        .l,.r{width: 400px;height: 800px;float: left;position: relative;}
        .l{background: black;border-radius: 400px 0 0 400px;}
        .r{background: #fff;border-radius: 0px 400px 400px 0px;}
        .l_s,.r_s{width: 200px;height:400px;}
        .l_s{background:#fff;border-radius: 200px 0 0 200px;position: absolute;left: 200px;}
        .r_s{background:#000;border-radius: 0px 200px 200px 0px;position: absolute;top: 400px;}
        .dian1,.dian2{width: 80px;height: 80px;}
        .dian1{background: #000;border-radius: 80px;position: absolute;left: 160px;
            top: 160px;z-index: 200;}
        .dian2{background: #fff;border-radius: 80px;position: absolute;left: -40px;
            top: 160px;z-index: 200;}
    </style>
</head>
<body>
    <div class="all">
        <div class="l">
            <div class="l_s">
                <div class="dian1"></div>
            </div>
        </div>
        <div class="r">
            <div class="r_s">
                <div class="dian2"></div>
            </div>
        </div>
    </div>
</body>
</html>

效果图