html +css 练习的（太极图）

最新推荐文章于 2025-01-14 11:29:59 发布

mercenary's L

最新推荐文章于 2025-01-14 11:29:59 发布

阅读量185

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_39947874/article/details/126545531

版权

前端专栏收录该内容

3 篇文章

订阅专栏

这个博客展示了如何使用HTML和CSS创建一个简单的太极图。通过定义相对定位的元素和渐变背景，作者实现了太极图的基本形状。同时，还添加了小圆点以增强视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .taiji {
position: relative;
width: 200px;
height: 200px;
background-image: linear-gradient(#fff 50%, #000 0);
border-radius: 100px;
}
.taiji::before {
position: absolute;
top: 50px;
left: 0;
content: '';
width: 100px;
height: 50px;
background-color: #000;
border-radius: 100px 100px 0 0;
}
.taiji::after {
position: absolute;
top: 100px;
left: 100px;
content: '';
width: 100px;
height: 50px;
background-color: #fff;
border-radius: 0 0 100px 100px;
}
   </style>
</head>
<body>
   <div id="app" style="background: #ddd;padding: 100px;">
<div class="taiji"></div>
<div class="yangyuyan"style="width: 20px;height: 20px;position: absolute;top: 195px;left: 150px;background-color: #fff;border-radius: 20px;"></div>
<div class="yingyuyan"style="width: 20px;height: 20px;position: absolute;top: 210px;left: 250px;background-color: #000;border-radius: 20px;"></div>
</div>
</body>
</html>