持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第34天,点击查看活动详情
最近喜欢研究一个div
画图,上一次用一个div
画图还是 # 我用一个div就画出了一个大西瓜~ 。昨天用一个div
画了个五角星。今天灵机一动,想画个太极八卦图。
构思
div
画个上白下黑的圆形div::before
画个黑色半圆div::after
画个白色半圆- 使用布局或者定位组合成太极图
是不是这么回事呀,貌似可行!话不多说,直接开搞!
绘制
画个上白下黑的圆形
不会画这种双色背景的可以看我之前写的文章 # 一文搞懂条纹背景。
.taiji {
width: 200px;
height: 200px;
background-image: linear-gradient(#fff 50%, #000 0);
border-radius: 100px;
}
div::before画个黑色半圆
.taiji::before {
position: absolute;
content: '';
width: 100px;
height: 50px;
background-color: #000;
border-radius: 100px 100px 0 0;
}
div::after画个白色半圆
.taiji::after {
position: absolute;
top: 150px;
content: '';
width: 100px;
height: 50px;
background-color: #fff;
border-radius: 0 0 100px 100px;
}
调整位置
.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;
}
码上掘金
小伙伴们可以在码上掘金在线体验效果!效果杠杠滴,看完直呼想去武当山练功~ code.juejin.cn/pen/7114679…
结语
一div
一世界,赶紧自己也动手试试吧!喜欢的记得点赞收藏啊,你的赞是作者持续创作的动力。感谢支持。