如何在CSS中倾斜虚线边框？

<style>
    .box {
        position: relative;
        width: 200px;
        height: 100px;
        border: 1px solid #000;
    }

    .box::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px dashed #000;
        transform: skewX(-30deg);
        z-index: -1;
    }
</style>

<div class="box"></div>