CSS3에서 삼각형 테두리 효과를 얻는 방법-CSS 튜토리얼-php.cn

CSS3에서 삼각형 테두리 효과를 얻는 방법

WBOY

풀어 주다： 2021-12-16 10:33:21

원래의

6687명이 탐색했습니다.

방법: 1. "테두리: 길이 값 투명, 테두리 상단: 높이 값 단색 값" 명령문을 사용하여 빈 요소를 삼각형 스타일로 설정합니다. 2. 다양한 색상의 큰 삼각형 요소 안에 작은 삼각형 요소를 배치합니다. 내부에서는 테두리가 있는 삼각형 효과를 얻을 수 있습니다.

CSS3에서 삼각형 테두리 효과를 얻는 방법

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

css3에서 테두리가 있는 삼각형 효과를 얻는 방법

Css에서 테두리가 있는 삼각형의 효과를 얻으려면 테두리 속성을 사용해야 합니다.

먼저 너비와 높이가 0인 div 요소가 필요합니다. 그런 다음 테두리 속성을 사용하여 div의 테두리 스타일을 설정하고 테두리의 두께 값을 아래쪽 삼각형 길이의 절반으로 설정한 다음 테두리를 설정합니다. 색상을 투명하게 합니다.

마지막으로 border-top 속성을 사용하여 div 요소의 상단 테두리를 표시합니다.

다양한 색상의 큰 삼각형 요소 안에 작은 삼각형 요소를 배치하면 테두리가 있는 삼각형 효과를 얻을 수 있습니다.

예제는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #demo {
            width: 0;
            height: 0;
            position: relative;
            border-top: solid 50px transparent;
            border-right: solid 50px black;
            /* 黑色大三角形 */
            border-bottom: solid 50px transparent;
        }
 
        #demo:after {
            content: "";
            width: 0;
            height: 0;
            position: absolute;
            left: 3px;
            top: -45px;
            border-top: solid 45px transparent;
            border-right: solid 45px white;
            /* 白色小三角形 */
            border-bottom: solid 45px transparent;
        }
</style>
</head>
<body>
<div id="demo"></div>
</body>
</html>

로그인 후 복사

출력 결과:

CSS3에서 삼각형 테두리 효과를 얻는 방법