Set only one edge

1, the border – image

<body>
    <div class="box">

    </div>
</body>

</html>
<style>
    .box {
        width: 600px;
        height: 600px;
        background: yellow;
        border-bottom: 100px solid black;
        border-image: linear-gradient(to bottom, transparent 50%, black 50%) 0 0 100% 0;
    }
</style>
Copy the code

2. False element +background-image

 <body>
    <div class="box">

    </div>
</body>

</html>
<style>
    .box {
        width: 600px;
        height: 600px;
        background: yellow;
        position: relative;
    }

    .box::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100px;
        background-image: linear-gradient(to bottom, transparent 50%, black 50%);
    }
</style>
Copy the code

Transform scaleY(.5)

<body>
    <div class="box">

    </div>
</body>

</html>
<style>
    .box {
        width: 600px;
        height: 600px;
        background: yellow;
        position: relative;
    }

    .box::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100px;
        background: red;
        transform: scaleY(.5);
    }
</style>
Copy the code

Two, around the setting

 <body>
    <div class="box">

    </div>
</body>

</html>
<style>
    .box {
        width: 600px;
        height: 600px;
        background: yellow;
        position: relative;
    }

    .box::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 200%;
        height: 200%;
        transform-origin: 0 0;
        border: 100px solid blue;
        transform: scale(.5);
    }
</style>
Copy the code