CSS는 래더 탭 페이지를 구현합니다.

웹 디자인에서 사다리꼴 탭은 매우 일반적인 형태이지만 사다리꼴은 구현하기 어려운 스타일입니다. 아래에서는 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을 통해 효과를 비교하고 볼 수 있습니다. 여기에서 저자는 두 가지 결과를 모두 보여줍니다.

This 는 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는 래더 탭 페이지를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!