CSS로 사다리꼴 탭을 만드는 방법

이번에는 CSS로 사다리꼴 탭 페이지를 만드는 방법과 CSS로 사다리꼴 탭 페이지를 만들 때 어떤 노트가 있는지 보여드리겠습니다. 실제 사례를 살펴보겠습니다.

웹 디자인에서 사다리꼴 탭은 매우 일반적인 형태이지만 사다리꼴은 구현하기 어려운 스타일입니다. 많은 개발자가 효과를 생성하기 위해 사다리꼴 배경 이미지를 직접 사용하지만 배경 이미지를 사용하여 생성하는 것은 그리 많지 않습니다. 추가 http 요청을 요구하는 이상적인 방법 여기서 저자는 CSS를 직접 사용하여 사다리꼴 효과를 얻는 방법을 제공합니다.

간단한 p를 예로 들어 보겠습니다.

<p>这是一个梯形</p>

.p{
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}
.p::before{
    content: ''; /*用伪元素来生成一个矩形*/
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #58a;
    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

요소 노드를 직접 3D 변형하면 요소 내의 콘텐츠도 변형되는 것은 바람직하지 않은 효과이므로 여기에서는 의사 요소를 사용하여 원하는 효과를 얻으려면 변형 효과를 의사 요소로 변경하세요. 여기에서 변형할 때 바닥을 고정하고 높이가 변경되므로 scaleY(1.3)来补足它在高度上的缩水。读者可以去掉scaleY(1.3)和transform-origin를 통해 효과를 비교하고 볼 수 있습니다. 여기에서 저자는 두 가지 결과를 모두 보여줍니다.

이것은 scaleY가 없고 변환에 의해 생성된 결과입니다. -origin

위 코드로 생성된 스타일 결과입니다

이제 사다리꼴 레이블이 생성되었으므로 여러 탭 페이지를 추가로 생성할 수 있습니다. 여기서 저자는 간단한 예를 제시합니다.

<nav>
    <a>Home</a>
    <a>Projects</a>
    <a>About</a>
</nav>

nav>a{
    position: relative;
    display: inline-block;
    padding: .3em 1em 0;
}
nav>a::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #ccc;
    background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0));
    border: 1px solid rgba(0,0,0,.4);
    border-bottom: none;
    border-radius: .5em .5em 0 0;
    transform: perspective(.5em) rotateX(5deg);
    transform-origin: bottom;
}

에 의해 생성된 렌더링은 다음과 같습니다.

독자는 변형 원본의 속성을 왼쪽, 오른쪽, 왼쪽 아래, 왼쪽 오른쪽 등으로 변경하여 다양한 효과를 볼 수 있습니다. 효과:

이 기사의 사례를 읽은 후 방법을 마스터했다고 믿습니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

css3에서 포인터 이벤트 사용에 대한 자세한 설명

CSS를 완전히 사용하여 요소 중심 맞추기

focus-within 사용에 대한 자세한 설명

원활한 캐러셀 광고를 만드는 CSS3

위 내용은 CSS로 사다리꼴 탭을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!