持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情
上图看效果
图如其名，接下来我讲解排版思路
实现思路
蘑菇分为头部,根部，俩大部分，头部还有一些不规则形状的蘑菇点
头部通过盒子先花一个半圆，然后通过伪元素的方式定位到头部盒子的最底部，实现头部的效果
根部就很简单了，这里就不说了
小圆点通过定位的方式实现不同位置的排列，其中还通过CSS的扭曲属性实现不规则的小圆点
transform: skew(0deg, 10deg);
页面结构
<!-- 大盒子 --> <div class="mushroom_box"> <!-- 蘑菇头 --> <div class="mushroom_top"> <!-- 不规则小圆点 --> <i></i> <i></i> <i></i> <i></i> <i></i> </div> <!-- 蘑菇根部 --> <div class="mushroom_bottom"></div> </div>
先给大盒子排好基本布局样式免得最后样式错乱，大盒子采用flex布局的方式设置Y轴为主轴侧轴居中，实现盒子里面的子元素居中排列
/* 大盒子 */ .mushroom_box { position: relative; box-sizing: border-box; width: 750px; padding-top: 20px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
蘑菇头部
首先先画出来一个半圆
/* 蘑菇头 */ .mushroom_top { position: relative; width: 400px; height: 200px; background: #FE876F; border-top-left-radius: 200px; border-top-right-radius: 200px; }
画出半圆后在通过伪元素的方式完成蘑菇头的基本样式，伪元素这里要采用定位的方式把他定位到半圆的底部，这样就实现了一个头部的基本轮廓
.mushroom_top::after { content: ''; position: absolute; top: 100%; width: 400px; height: 100px; border-bottom-left-radius: 200px; border-bottom-right-radius: 200px; background: #FE876F; }
头部完成后，需要在给上边框，这样才能实现一个初步的效果，伪元素也需要给边框，整个头部都需要有边框，伪元素有了边框之后会和头部的盒子对不起，这是因为伪元素是基准头部盒子的content部分进行定位的，但是边框不在content部分，这个时候需要给通过定位的left属性减去边框的宽度就可以实现对齐的效果了
/* 蘑菇头 */ .mushroom_top { border: 4px solid #000; } .mushroom_top::after { content: ''; position: absolute; top: 100%; left: -4px; border: 4px solid #000; border-top: none; }
蘑菇头根部
蘑菇头根部比较简单，给宽高和边框就好了，最后在通过边框圆角的方式实现一个圆底
/* 蘑菇根部 */ .mushroom_bottom { width: 120px; height: 300px; background: #FFF6E5; border: 4px solid #000; border-top-left-radius: 150px; border-top-right-radius: 150px; border-bottom-left-radius: 100px; border-bottom-right-radius: 100px; }
不规则蘑菇圆点
不规则蘑菇圆底，通过给蘑菇头里面的标签定位的方式结合css序选择器实现圆点的大小和不同位置的排列，在通过css3的skew扭曲属性实现不规则的圆点大小
/* 蘑菇小黄点 */ .mushroom_top>i { position: absolute; width: 30px; height: 30px; border-radius: 50%; background: #FFF9D6; border: 3px solid #000; top: 20%; left: 40%; } .mushroom_top>i:nth-child(2) { top: 30%; left: 20%; width: 40px; height: 50px; transform: skew(30deg, 20deg); } .mushroom_top>i:nth-child(3) { top: 70%; left: 60%; width: 70px; height: 70px; z-index: 8; } .mushroom_top>i:nth-child(4) { top: 70%; left: 20%; width: 90px; height: 90px; transform: skew(0deg, 10deg); z-index: 8; } .mushroom_top>i:nth-child(5) { top: 15%; left: 60%; width: 90px; height: 90px; z-index: 8; }
