[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>
