CSS를 사용하여 삼각형을 그리는 방법-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

CSS를 사용하여 삼각형을 그리는 방법

王林

Aug 26, 2020 pm 04:17 PM

css삼각형

먼저 렌더링을 살펴보겠습니다.

(동영상 튜토리얼 추천: css video tutorial)

CSS를 사용하여 삼각형을 그리는 방법

구현 코드:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        /* css3绘制三角形 */
        .triangle{
            width: 0px;                           /*设置宽高为0，所以div的内容为空，从才能形成三角形尖角*/
            height: 0px;
            border-bottom: 200px solid #00a3af;
            border-left: 200px solid transparent;    /*transparent 表示透明*/
            border-right: 200px solid transparent;
        }
    </style>
</head>
<body>
    <div class="triangle"></div>
</body>
</html>

아직 이해가 안 되시는 분들을 위해 다음을 보시면 됩니다.

1. div의 너비와 높이를 일정량 설정하고, 네 변에 테두리를 설정합니다.

.triangle{
	width: 50px;
	height: 50px;
	border-top: 200px solid #00a497;
	border-bottom: 200px solid #cc7eb1;
	border-left: 200px solid #165e83;
	border-right: 200px solid #c85179;
}

위 코드는 div가 네 변에 일정한 너비와 높이를 갖도록 설정합니다.

CSS를 사용하여 삼각형을 그리는 방법

2 div의 너비와 높이를 0으로 설정하고, 네 변의 테두리 너비를 모두 200px로 설정합니다.

.triangle{
   width: 0px;
   height: 0px;
   border-top: 200px solid #00a497;
   border-bottom: 200px solid #cc7eb1;
   border-left: 200px solid #165e83;
   border-right: 200px solid #c85179;
}

위 코드에서 div의 너비와 높이를 0으로 설정하고 4개를 설정합니다.

CSS를 사용하여 삼각형을 그리는 방법

(권장 관련 튜토리얼: CSS 튜토리얼)

3 다음으로 div 너비와 높이는 여전히 0이고 테두리 상단은 제거됩니다.

위 코드는 div 너비와 높이를 0으로 설정합니다. 아래쪽 테두리와 왼쪽 및 오른쪽 테두리만 설정한 경우 효과는 다음과 같습니다.

CSS를 사용하여 삼각형을 그리는 방법

4. 마지막으로 테두리 색상만 설정하는 것으로 나타났습니다. -아래쪽과 오른쪽 테두리를 투명하게 만들면

.triangle{
   width: 0px;
   height: 0px;
   border-bottom: 200px solid #cc7eb1;
   border-left: 200px solid #165e83;
   border-right: 200px solid #c85179;
}

최종 효과:

CSS를 사용하여 삼각형을 그리는 방법