집 >웹 프론트엔드 >CSS 튜토리얼 >래더 탭 페이지를 구현하는 CSS 방법

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

小云云원래의: 2017-12-05 15:47:581927검색

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

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

<p class="p">这是一个梯形</p>

.p{
    position: relative;
    display: inline-block;
    padding: .5em 1em .35em;
    color: white;
}
.p::before{
    content: &#39;&#39;; /*用伪元素来生成一个矩形*/
    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을 통해 효과를 비교할 수 있습니다. 여기에서 저자는 두 가지 결과를 모두 보여줍니다.

래더 탭 페이지를 구현하는 CSS 방법
이것은 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: &#39;&#39;;
    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 방법 독자는 변환 원본의 속성을 왼쪽, 오른쪽, 왼쪽 아래, 왼쪽 오른쪽 등으로 변경할 수 있습니다. 다양한 효과 보기. 여기서는 몇 가지 효과를 보여 드리겠습니다.

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

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

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

관련 기사