1. HTML结构

[HTML] 纯文本查看 复制代码

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

2. CSS代码

[CSS] 纯文本查看 复制代码

<style type="text/css">
    /*通配符选择器,清除所有标签的内外边距*/
    *{
        margin: 0;
        padding: 0; 
    }
    /*类选择器*/
    .box{
        background-color: skyblue;/*设置背景颜色为天空蓝*/
        width: 200px;/*设置宽度为200px*/
        height: 200px;/*设置高度为200px*/
        position: relative;/*设置定位方式为相对定位*/
        margin: 50px auto;/*实现元素的水平居中*/
    }
    /*分组选择器与后代选择器*/
    .box .left,.box .right{
        width: 100px;/*设置宽度为100px*/
        height: 160px;/*设置高度160为px*/
        background-color: pink;/*设置背景颜色为粉色*/
        border-radius: 50px 50px 0 0;/*设置左上角 与右上角圆角度数为50px 左下角与右下角为0*/
        position: absolute;/*设置定位方式为绝对定位*/
        left: 0;/*设置水平坐标位置*/
        top:0;/*设置垂直坐标位置*/
    }
    /*后代选择器选中box元素中的left元素*/
    .box .left{
        transform: rotate(-45deg);/*设置逆时针方向旋转45度*/
    }
    /*后代选择器选中box元素中的right元素*/
    .box .right{
        transform: rotate(45deg);/*设置顺时针方向旋转45度*/
        left: 43px;/*设置水平坐标位置*/
    }
</style>

3. 效果图

1. HTML结构

[HTML] 纯文本查看 复制代码

<div class="box">
    <div class="left"></div>
    <div class="right"></div>
</div>

2. CSS代码

[CSS] 纯文本查看 复制代码

<style type="text/css">
    /*通配符选择器,清除所有标签的内外边距*/
    *{
        margin: 0;
        padding: 0; 
    }
    /*类选择器*/
    .box{
        background-color: skyblue;/*设置背景颜色为天空蓝*/
        width: 200px;/*设置宽度为200px*/
        height: 200px;/*设置高度为200px*/
        position: relative;/*设置定位方式为相对定位*/
        margin: 50px auto;/*实现元素的水平居中*/
    }
    /*分组选择器与后代选择器*/
    .box .left,.box .right{
        width: 100px;/*设置宽度为100px*/
        height: 160px;/*设置高度160为px*/
        background-color: pink;/*设置背景颜色为粉色*/
        border-radius: 50px 50px 0 0;/*设置左上角 与右上角圆角度数为50px 左下角与右下角为0*/
        position: absolute;/*设置定位方式为绝对定位*/
        left: 0;/*设置水平坐标位置*/
        top:0;/*设置垂直坐标位置*/
    }
    /*后代选择器选中box元素中的left元素*/
    .box .left{
        transform: rotate(-45deg);/*设置逆时针方向旋转45度*/
    }
    /*后代选择器选中box元素中的right元素*/
    .box .right{
        transform: rotate(45deg);/*设置顺时针方向旋转45度*/
        left: 43px;/*设置水平坐标位置*/
    }
</style>

3. 效果图