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

ZDZ

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 2,162

1889326059_1704941976.2832.png

안녕하세요, border-radius 속성으로 한쪽 모서리가 들어간 디자인을 하려고하는데 이걸 어떻게 하는건지 잘 모르겠습니다...ㅠㅠ 알고 계시는 고수님들 계실까요?

그누보드5

답변 5개 / 댓글 3개

채택된 답변

+20 포인트

배르만

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

다음 코드가 도움이 될지 모르겠습니다.

Copy

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

 

<div class="tmpl_wrapper">
    <div class="tmpl_shape_00">
        <div>this is a text</div>
    </div>
</div>