css实现太极阴阳盘效果

代码语言:html

所属分类:布局界面

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
html, body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

:root {
    --width: 48px;
    --height: 48px;
    --fgcolor: black;
    --bgcolor: #eee;
}

#yin-yang {
    width: calc(var(--width) * 8);
    height: calc(var(--height) * 4);
    background: var(--bgcolor);
    border-color: var(--fgcolor);
    border-style: solid;
    border-width: calc(var(--width) / 6) calc(var(--width) / 6) calc((var(--width) / 6) + (var(--width) * 4)) calc(var(--width) / 6);
    border-radius: 100%;
    position: relative;
    box-sizing: content-box;
}

#yin-yang:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
 .........完整代码请登录后点击上方下载按钮下载查看

网友评论0