border-radius로 한쪽 모서리 비스듬하게 만들기 채택완료

</p>

<p><style>

:root {

    --v-shape-00-tp: 25%;

    --v-shape-00-ratio: 0.5;

    --v-shape-00-width: 300px;

    --v-shape-00-height: calc(var(--v-shape-00-width) * var(--v-shape-00-ratio));

    --v-shape-00-border: 5px;

    --v-shape-00-bgcolor: #fff;

}

.tmpl_wrapper {

    background-color: var(--v-shape-00-bgcolor);

}

.tmpl_shape_00, .tmpl_shape_00 > div {

    position: relative;

    width: var(--v-shape-00-width);

    height: var(--v-shape-00-height);

    background-color: #555;

    clip-path: polygon(calc(

        var(--v-shape-00-tp) * var(--v-shape-00-ratio)

    ) 0%, 100% 0%, 100% 100%, 0% 100%, 0% var(--v-shape-00-tp));

}

.tmpl_shape_00 > div {

    position: absolute;

    top: var(--v-shape-00-border);

    left: var(--v-shape-00-border);

    content: '';

    background-color: var(--v-shape-00-bgcolor);

    width: calc(var(--v-shape-00-width) - var(--v-shape-00-border) * 2);

    height: calc(var(--v-shape-00-height) - var(--v-shape-00-border) * 2);

}

</style></p>

<p> </p>

<p><div class="tmpl_wrapper">

    <div class="tmpl_shape_00">

        <div>this is a text</div>

    </div>

</div></p>

<p>