CSS制作太极八卦图及衍生物

最新推荐文章于 2025-06-14 09:57:17 发布

浪戟天下

最新推荐文章于 2025-06-14 09:57:17 发布

阅读量810

点赞数 2

CC 4.0 BY-SA版权

分类专栏：基础文章标签： css 基础太极八卦

本文链接：https://blog.youkuaiyun.com/weixin_44541467/article/details/86546467

本文介绍了如何使用CSS3技术制作太极八卦图及其衍生物。通过创建梯形和三角形，结合边框与定位，实现了八卦图的布局。文章还分享了意外收获，展示了四个由八卦图衍生出的不同形状，鼓励读者尝试调整比例创造更多可能性。

CSS是网页设计师和前端人员需要了解和学习的一门语言，特别是现在很多网页使用扁平化设计，这类设计风格大部分布局、交互动画甚至是图标都会使用高级点的CSS3技能，所以我们应该熟练掌握CSS这门样式语言。下面我就分享一下我所掌握的一些CSS3知识（我是新手求轻喷）。

一、八卦图

图一、

图二、

看起来是十分的繁琐，实际上也是十分的繁琐。

<div class="bgj">

       <div class="tx"><i></i><i></i><i></i></div>

       <div class="tx"><i><d></d></i><i></i><i></i></div>

       <div class="tx"><i></i><i><d></d></i><i><d></d></i></div>

       <div class="tx"><i><d></d></i><i><d></d></i><i><d></d></i></div>

       <div class="tx"><i></i><i></i><i><d></d></i></div>

       <div class="tx"><i><d>&