效果
原理
解说:
利用一个大的盒子,利用border-radius:50%;设置为一个圆,在大的盒子里面放一个1号盒子(宽是大盒子一半,高度等同大盒子)在左边,利用border-radius左上和左下设值右上右下为0;右边在放一个2号盒子(宽是大盒子一半,高度等同大盒子)在右边,利用border-radius右上和右下设值左上左下为0。
利用子绝父相原理,大盒子相对定位,3号盒子和4号盒子都利用绝对定位(宽高都为父盒子的一半),在3号盒子里面再放一个5号盒子,实现垂直水平居中。在4号盒子里面放5号盒子,实现垂直水平居中。就完成了。
最后令1和3、6背景颜色为黑色。2、4、5背景颜色为黑色背景为白色即可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content&#