CSS 요소를 기울이고 내부 둥근 테두리 상단 달성

웹 디자인에서는 복잡한 그래픽 요소를 정밀성과 반응성으로 복제하는 것이 어려울 수 있습니다. CSS를 사용하여. 그러한 과제 중 하나는 내부 둥근 테두리 상단이 있는 기울어진 요소를 만드는 것입니다.

HTML 구조 정의

먼저 HTML 구조를 정의해 보겠습니다.

CSS 구현

요소를 기울이고 내부 둥근 테두리 상단을 추가하기 위해 다음 CSS를 사용합니다.

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before,
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
}

.header:before {
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}

.header:after {
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

이 CSS는 내부 둥근 테두리 상단의 기반 역할을 하는 기울어진 요소를 생성합니다. :before 의사 요소는 둥근 모서리로 파란색 영역을 채우고, :after 의사 요소는 방사형 그라데이션 효과를 추가하여 내부 테두리를 만듭니다.

기울기와 내부 테두리 결합

기울어진 요소와 내부 테두리를 결합하여 원하는 효과를 얻습니다.

.header {
    border-top: 20px solid blue;
    height:100px;
    position: relative;
    overflow: hidden;
}
.header:before {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 100%;
    width: 50%;
    border-radius: 0 0 20px 0;
    background: blue;
}
.header:after {
    content: "";
    vertical-align:top;
    display: inline-block;
    transform-origin: top right;
    transform: skew(-40deg);
    height: 20px;
    width: 20px;
    margin-left:-1px;
    background: radial-gradient(circle at bottom right, transparent 68%, blue 73%);
}

이 방법을 사용하면 여러 요소가 필요 없이 기울어진 모양과 내부 둥근 테두리 상단을 모두 갖춘 반응형 요소를 만들 수 있습니다. 이 접근 방식은 더 큰 유연성과 구현 용이성을 제공합니다.