我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

效果图

页面结构

我们实现黑板需要有一个黑板大盒子，黑板大盒子中包括了黑板内容盒子和黑板腿盒子

  <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);
        }

代码我已经放到码上掘金了，感兴趣的大家可以看一下！

坚持努力，无惧未来！