一行HTML也能画画？来一个！

再次声明，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>

具体数值可用调试工具慢慢调，效果图如下，八卦图！