一行代码实现太极图(阴阳八卦)

用CSS实现太极图

之前有看别人用CSS实现太极图,写了老长的代码。
不过第一次见的时候,还是觉得挺好玩的。
CSS如下(效果预览):

 #yin-yang {
    width: 96px;
    height: 48px;
    background: #eee;
    border-color: red;
    border-style: solid;
    border-width: 2px 2px 50px 2px;
    border-radius: 100%;
    position: relative;
}
#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    background: #eee;
    border: 18px solid red;
    border-radius: 100%;
    width: 12px;
    height: 12px;
}
#yin-yang:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: red;
    border: 18px solid #eee;
    border-radius:100%;
    width: 12px;
    height: 12px;
}

如果上面的代码,你看着还有问题,那需要补补CSS了


用HTML实现太极图

不过我发现用html实现这个太极图,只需要一行代码
代码如下(效果预览):

<span class="Sail">&#9775;</span>

这是什么原理呢?
这个叫做Unicode字符
使用Unicode字符,需要在meta标签中将charset属性值设为utf-8
使用字符

  • 一、工作量更加少
  • 二、是响应的
  • 三、不需要像使用其他icon那样引入文件,页面性能更高
  • 四、Unicode字符,实现了一万多种不同的字符

很多工作别人已经帮我们做好了,只是我们不知道。

关注我的微信公众号[李一二],即时看更多的文章