一行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>

具體數值可用除錯工具慢慢調，效果圖如下，八卦圖！