一个div最简方法画太极图

daoke_li

已于 2024-03-19 22:20:35 修改

阅读量242

点赞数 3

分类专栏：前端移动开发前端文章标签：前端 css3

于 2024-02-24 16:32:03 首次发布

本文链接：https://blog.csdn.net/daoke_li/article/details/136273076

版权

前端同时被 2 个专栏收录

95 篇文章 3 订阅

订阅专栏

前端移动开发

31 篇文章 1 订阅

订阅专栏

一个div最简方法画太极图

直接上代码，一目了然

html

 <div class="太极图"/>

css

.太极图 {
    --直径: 360px;
    position: relative;
    width: var(--直径);
    height: var(--直径);
    background: linear-gradient(to right, white 50%, black 50%);
    border-radius: 50%;
    box-shadow: 0 0 12px gray;

    &:before,
    &:after {
        content: '';
        display: block;
        position: absolute;
        width: calc(var(--直径)/2);
        height: calc(var(--直径)/2);
        left: 50%;
        border-radius: 50%;
    }

    &:before {
        top: 25%;
        translate: -50% -50%;
        background: radial-gradient(black 25%, white 26%);
    }

    &:after {
        bottom: 25%;
        translate: -50% 50%;
        background: radial-gradient(white 25%, black 26%);
    }
}