如何在没有画布的html中手动绘制矩形？

<style>
    .rectangle {
        width: 200px;
        height: 100px;
        border: 2px solid black;
        position: relative;
    }
    .rectangle::before,
    .rectangle::after {
        content: "";
        position: absolute;
        border: 2px solid black;
    }
    .rectangle::before {
        top: -2px;
        left: -2px;
        width: 100%;
        height: 2px;
    }
    .rectangle::after {
        bottom: -2px;
        right: -2px;
        width: 2px;
        height: 100%;
    }
</style>

<div class="rectangle"></div>