console
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>八卦图</title>
<style>
.wrap {
border: 1px solid black;
width: 300px;
height: 300px;
position: relative;
}
.white {
width: 300px; /* 直径是半径的两倍 */
height: 300px;
background-color: white;
position: absolute;
left: 0;
top: 0;
clip-path: path('M 150,0 A 150,150 0 1,1 149,0 Z');
}
.black {
width: 225px;
height: 300px;
position: absolute;
background-color: black;
right: 0;
top: 0;
clip-path: path('M 75,0 A 75,75 0 0,0 75,150 A 75,75 0 0,1 75,300 A 150,150 0 0,0 75,0 Z')
}
.circle {
width: 50px;
height: 50px;
background-color: red;
clip-path: path('M 25,0 A 25,25 0 1,1 24.99,0 Z');
}
.black-dot {
background-color: black;
position: absolute;
left: 125px;
bottom: 50px;
}
.white-dot {
background-color: white;
position: absolute;
right: 125px;
top: 50px;
}
</style>
<script src="https://cdn.bootcdn.net/ajax/libs/alpinejs/3.10.3/cdn.min.js" defer></script>
<script src="https://unpkg.com/@unocss/runtime"></script>
<script>
// pass unocss options
window.__unocss = {
rules: [
// custom rules...
],
presets: [
// custom presets...
],
// ...
}
</script>
</head>
<body>
<div class="wrap">
<div class="white"></div>
<div class="black"></div>
<div class="circle black-dot"></div>
<div class="circle white-dot"></div>
</div>
<div class="triangle"></div>
<script>
</script>
</body>
</html>