chokcoco / magiccss

CSS3奇思妙想，单标签实现各类图形

magicCss

CSS3 奇思妙想，使用 CSS3 在单个标签内实现各类图形。

除去一些需要背景衬托的图形，本项目中所有图形均为单标签图形，即使用一个标签完成整个图案。

Demo链接	Description
CSS3奇思妙想	CSS3奇思妙想，单标签实现各类图形
SVG奇思妙想	使用 SVG or clip-path 创建的图形

由来

拜读了 《CSS Secret》 这本大作之后，有了这个项目的想法。其中带星号的图形为书中出现过的实例。

大量使用了 ::before 、::after 伪元素，transparent、border ，多重线性与径向渐变，多重内外阴影，实现了许多奇妙的图形。

很多例子参照了书中得来，也有许多我工作中实践积攒而来的。

Contact

如果有任何问题或者疑问，可以加 QQ 群：418766876 。也欢迎想讨论各种天马行空的 CSS 相关问题的小伙伴们加入。

magiccss's Issues

请教您一个问题

你好~
http://chokcoco.github.io/magicCss/html/index.html
我想实现这样的链接，别人通过访问这个链接看到我在github一些项目，请问怎么配置？

太极图是错的

@chokcoco 你实现的太极图中，如下图：

箭头所指的位置用了半圆实现。

而真正的太极图并不是这样的，见：https://zh.wikipedia.org/wiki/%E5%A4%AA%E6%A5%B5%E5%9C%96

上图箭头所指的链接中，可以看到更详细的图案：
https://www.fileformat.info/info/unicode/char/262f/browsertest.htm

可以观察到，明显不是两个半圆的关系。

点个赞

不错，已收藏！

天气系列的DEMO是原创吗？

我感觉在CodePen上看到过类似的示例。