<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.all{width: 800px;height: 800px;border: 1px solid black;border-radius: 400px;}
.l,.r{width: 400px;height: 800px;float: left;position: relative;}
.l{background: black;border-radius: 400px 0 0 400px;}
.r{background: #fff;border-radius: 0px 400px 400px 0px;}
.l_s,.r_s{width: 200px;height:400px;}
.l_s{background:#fff;border-radius: 200px 0 0 200px;position: absolute;left: 200px;}
.r_s{background:#000;border-radius: 0px 200px 200px 0px;position: absolute;top: 400px;}
.dian1,.dian2{width: 80px;height: 80px;}
.dian1{background: #000;border-radius: 80px;position: absolute;left: 160px;
top: 160px;z-index: 200;}
.dian2{background: #fff;border-radius: 80px;position: absolute;left: -40px;
top: 160px;z-index: 200;}
</style>
</head>
<body>
<div class="all">
<div class="l">
<div class="l_s">
<div class="dian1"></div>
</div>
</div>
<div class="r">
<div class="r_s">
<div class="dian2"></div>
</div>
</div>
</div>
</body>
</html>
效果图