물결 모양 테두리 CSS를 구현하는 방법

CSS에서 물결 모양 테두리를 구현하는 방법: 먼저 새 div를 만들고 클래스 이름을 지정한 다음 배경색을 설정하고 div를 흰색으로 설정한 다음 설정하기 전에 의사 요소를 사용하고 그라데이션이 있는 모양을 삽입합니다. 색상; 마지막으로 치수를 추가하여 그래픽을 나누고 삼각형을 추가하여 물결 효과를 얻습니다.

이 튜토리얼의 운영 환경: Dell G3 컴퓨터, Windows 7 시스템, HTML5&&CSS3 버전.

추천: "css 비디오 튜토리얼"

물결 모양 테두리 CSS 구현

1. 새 div를 만들고 클래스 이름을 지정합니다

<div class="zigzag"></div>

2. 배경색을 설정하고 div를 흰색으로 설정합니다

body {
    margin: 0;
    padding: 0;
    background: lightblue;
}
.zigzag {
    position: absolute;
    top: 50%;
    width: 100%;
    height: 50%;
    background: #fff;
}

3. 이전에 의사 요소를 사용하여 설정하고 그라데이션 색상으로 도형을 삽입하세요.

.zigzag:before
{
    content: '';
    position: absolute;
    width: 100%;
    height: 20px;
    display: block;
    background: linear-gradient(
        -45deg, transparent 33.33%,
        lightblue 33.33%, lightblue 66.66%,
        transparent 66.66%
        );
}

4. 그래픽을 분할하려면 크기를 추가하세요.

background-size: 30px 60px;

5. 양수 45도 각도의 삼각형을 추가합니다.

linear-gradient(
 45deg, transparent 33.33%,
 lightblue 33.33%, lightblue 66.66%,
 transparent 66.66%
);

6. 삼각형을 회전시키면 이때 파도가 나타납니다.

transform: rotateX(180deg)

위 내용은 물결 모양 테두리 CSS를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!