先上效果图,如图所示:
最终效果
第一步:画个父容器+12个子容器(扇叶)
将父容器居中,子容器使用absolute定位,基本代码如下:html>
body { display: flex; height: 95vh; align-items: center; justify-content: center;
} .container { position: relative; width: 150px; height: 150px; background-color: #008B64;
} .item { position: absolute; top: 0px; left: 0px; width: 150px; height: 80px; background-color: #A52A2A;
}
效果如图: