效果图
页面结构
我们实现黑板需要有一个黑板大盒子，黑板大盒子中包括了黑板内容盒子和黑板腿盒子
<div id="app"> <!-- 黑板盒子 --> <div class="blackboard"> <!-- 黑板内容 --> <div class="blackboard_content">中秋快乐！</div> <!-- 黑板腿 --> <ul> <li></li> <li></li> <li></li> </ul> </div> </div>
初始样式
先清除页面内外边距，在让
#app盒子占满整个屏幕，利用flex布局的方式让里面的内容进行垂直水平居中进行显示
* { margin: 0; padding: 0; } #app { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; }
黑板大盒子
黑板大盒子我们这里需要使用到定位，因为黑板腿我们需要通过定位的方式定位到下方，给黑板大盒子设置好宽高和背景色，同时也使用flex布局将里面的内容进行垂直水平居中显示，并且设置好圆角以及内边距
/* 黑板盒子 */ .blackboard { position: relative; width: 500px; height: 300px; display: flex; justify-content: center; align-items: center; background: #e9a065; border-radius: 30px; padding: 20px; }
黑板内容盒子
黑板内容盒子我们也需要用到定位，因为黑板腿通过定位的方式放到底部层级会比内容盒子高，所以我们使用定位提高内容盒子层级，然后再设置好宽高以及边框圆角以及文字颜色以及文字大小
/* 黑板内容 */ .blackboard_content { position: relative; width: 100%; height: 100%; background: #000; border-radius: 20px; color: #fff; font-size: 25px; font-weight: bold; padding: 10px; box-sizing: border-box; z-index: 9; }
黑板腿
黑板腿我们这里使用无序列表结合定位的方式实现，先将黑板腿大盒子定位到黑板大盒子的底部且水平居中，然后使用flex布局的方式让黑板腿盒子X轴排列，给子盒子设置好宽高和背景颜色，最后通过CSS的旋转属性，将里面的子盒子实现交叉的效果
/* 黑板腿 */ ul { position: absolute; top: 80%; left: 50%; transform: translate(-50%); list-style: none; display: flex; } ul>li { width: 15px; height: 150px; border-radius: 5px; background: #e9a065; transform-origin: center center; } ul>li:nth-child(1) { transform: rotate(45deg); } ul>li:nth-child(3) { transform: rotate(-45deg); }
代码我已经放到码上掘金了，感兴趣的大家可以看一下！
