用一个div画太极八卦

2,243 阅读2分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第34天,点击查看活动详情

最近喜欢研究一个div画图,上一次用一个div画图还是 # 我用一个div就画出了一个大西瓜~ 。昨天用一个div画了个五角星。今天灵机一动,想画个太极八卦图。

构思

  • div画个上白下黑的圆形
  • div::before画个黑色半圆
  • div::after画个白色半圆
  • 使用布局或者定位组合成太极图

image.png

image.png

是不是这么回事呀,貌似可行!话不多说,直接开搞!

绘制

画个上白下黑的圆形

不会画这种双色背景的可以看我之前写的文章 # 一文搞懂条纹背景

.taiji {
    width: 200px;
    height: 200px;
    background-image: linear-gradient(#fff 50%, #000 0);
    border-radius: 100px;
}

image.png

div::before画个黑色半圆

.taiji::before {
    position: absolute;
    content: '';
    width: 100px;
    height: 50px;
    background-color: #000;
    border-radius: 100px 100px 0 0;
}

image.png

div::after画个白色半圆

.taiji::after {
    position: absolute;
    top: 150px;
    content: '';
    width: 100px;
    height: 50px;
    background-color: #fff;
    border-radius: 0 0 100px 100px;
}

image.png

调整位置

.taiji {
    position: relative;
    width: 200px;
    height: 200px;
    background-image: linear-gradient(#fff 50%, #000 0);
    border-radius: 100px;
}
.taiji::before {
    position: absolute;
    top: 50px;
    left: 0;
    content: '';
    width: 100px;
    height: 50px;
    background-color: #000;
    border-radius: 100px 100px 0 0;
}
.taiji::after {
    position: absolute;
    top: 100px;
    left: 100px;
    content: '';
    width: 100px;
    height: 50px;
    background-color: #fff;
    border-radius: 0 0 100px 100px;
}

image.png

码上掘金

小伙伴们可以在码上掘金在线体验效果!效果杠杠滴,看完直呼想去武当山练功~ code.juejin.cn/pen/7114679…

结语

div一世界,赶紧自己也动手试试吧!喜欢的记得点赞收藏啊,你的赞是作者持续创作的动力。感谢支持。