再次声明,body里面只有这一行代码,只这一个盒子标签,来个图看看哈哈哈哈哈!!!
<div class="box"></div>
全靠CSS撑场面,敬请欣赏哈哈哈哈哈!
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #ccc;
}
.box {
position: relative;
/* 首先定义w0和h0 */
width: 0;
height: 0;
/* 定义边框 */
border-top: 200px solid #fff;
border-right: 200px solid #fff;
border-bottom: 200px solid #000;
border-left: 200px solid #000;
border-radius: 50%;
margin: 200px auto;
color: red;
}
/* 左上角白心黑框 */
.box::before {
position: absolute;
bottom: -30px;
right: -29px;
content: '';
width: 30px;
height: 30px;
background-color: #fff;
border: 85px solid #000;
border-radius: 50%;
}
/* 右下角黑心白框 */
.box::after {
position: absolute;
top: -29px;
left: -30px;
content: '';
width: 30px;
height: 30px;
background-color: #000;
border: 85px solid #fff;
border-radius: 50%;
}
</style>
具体数值可用调试工具慢慢调,效果图如下,八卦图!