래더 탭 페이지를 구현하는 CSS 방법

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

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

<p class="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 및 변환 원본이 없는 결과위 코드로 생성된 스타일 결과입니다

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

<nav>
    <a href="#">Home</a>
    <a href="#">Projects</a>
    <a href="#">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;
}

렌더링은 다음과 같습니다.

독자는 변환 원본의 속성을 왼쪽, 오른쪽, 왼쪽 아래, 왼쪽 오른쪽 등으로 변경할 수 있습니다. 다양한 효과 보기. 여기서는 몇 가지 효과를 보여 드리겠습니다.

페이지 방식이 모든 분들께 도움이 되었으면 좋겠습니다.

관련 권장사항:

CSS를 사용하여 간단한 애니메이션 효과 얻기

HTML+CSS를 사용하여 애니메이션 효과 얻기

CSS를 사용하여 다중 열 레이아웃 구현하는 방법

위 내용은 래더 탭 페이지를 구현하는 CSS 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!