用一个div盒子写出太极图

最新推荐文章于 2022-08-31 16:24:36 发布

行云＆流水

最新推荐文章于 2022-08-31 16:24:36 发布

阅读量437

点赞数 1

分类专栏：前端

本文链接：https://blog.csdn.net/GXY1551705593/article/details/97287501

版权

前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

提示：巧用伪元素before、after 和box-shadow。
第一步，设置一个div盒子；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/taiji.css">
    <title>太极图</title>
</head>
<body>
    <div class="taiji"></div>
</body>
</html>

第二步，利用css样式构一个黑白半圆；

.taiji{
    box-shadow: 0 0 30px #000000;
    height: 400px;
    border-left:200px  solid #000000;
    border-right:200px  solid white;
    border-radius:200px;
    margin: 50px auto;
    width: 0;
}

结果为：
在这里插入图片描述
第三步，用伪元素

.taiji:before{
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color:white;
    border-radius: 75px;
    position: relative;
    left: -48px;
    top: 50px;
    box-shadow: 0 0 0 50px black;
}
.taiji:after{
    content: "";
    display: block;
    width: 100px;
    height: 100px;
    background-color: black;
    border-radius: 75px;
    position: relative;
    left: -48px;
    top: 150px;
    box-shadow: 0 0 0 50px white;
}

结果，如图
在这里插入图片描述

行云＆流水

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
用一个div盒子写出太极图

提示：巧用伪元素before、after 和box-shadow。第一步，设置一个div盒子；<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <link rel="stylesheet" href="css/taiji.css"> &...
复制链接

扫一扫