CSS로 사다리꼴 탭을 만드는 방법-CSS 튜토리얼-php.cn

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

php中世界最好的语言

풀어 주다： 2018-03-21 13:15:14

원래의

2013명이 탐색했습니다.

이번에는 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를 통해 효과를 비교하고 볼 수 있습니다. 여기에서 저자는 두 가지 결과를 모두 보여줍니다.

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

이것은 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;
}

로그인 후 복사

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

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