답변 5개
채택된 답변
+20 포인트
1년 전
다음 코드가 도움이 될지 모르겠습니다.
</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>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
s
sinbi
1년 전
Z
ZDZ
1년 전
감사합니다!!!! 참고해서 문제 해결했어요 ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
댓글을 작성하려면 로그인이 필요합니다.
1년 전
안녕하세요.
아래의 내용을 참고해 보시겠어요~
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 200px;
background-color: #f00;
border-radius: 25px 0 0 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
Z
ZDZ
1년 전
해보니 radius로는 둥글어지기만 하네요...ㅠㅠㅠ 둥글게 하는게 아니고 샤프하게 모서리를 자른 느낌을 원하고있습니다...!
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
질문자 님께 확실히 도움되겠네요. ㅎ