CSS3를 사용하여 웹페이지에 다양한 삼각형 스타일 컬렉션 구현(원리 분석)

누구나 웹페이지를 탐색할 때 원, 정사각형, 직사각형, 삼각형 등 다양한 그래픽을 자주 보게 됩니다. 오늘은 CSS를 사용하여 삼각형을 구현하는 방법에 대해 특별히 튜토리얼을 만들었습니다. CSS에서 삼각형을 구현하는 원리는 무엇입니까?

추천 매뉴얼 : css 온라인 매뉴얼

자세한 예시를 살펴보세요 .

(관련 비디오 튜토리얼 권장 사항: CSS tutorial)

css3 삼각형 사용 시나리오# 🎜🎜#

우리는 특수 효과 중 하나가 범위 드롭다운 목록이라는 것을 알고 있습니다. 이는 마우스를 div에 놓으면 원래 숨겨진 콘텐츠 또는 , 이러한 드롭다운 목록은 그림과 같이 원래 div 영역 블록을 가리키는 작은 삼각형을 강조 표시합니다.

#🎜🎜 #이제 이 삼각형을 어떻게 작성하는지 요약해 보겠습니다.

CSS3 삼각형 구현 원리CSS3에서는 주로 transparent 속성을 사용하는데, 투명하다는 뜻입니다. 예를 들어, 글꼴을 검정색으로 설정하면 color: black이라고 쓰고, 글꼴 색상을 투명으로 설정하려면 color: transparent라고 쓰면 됩니다. 같은 방식으로 background-color:transparent는 배경을 투명하게 설정할 수 있습니다.

8개의 삼각형 분류삼각형을 위치에 따라 8가지 유형으로 나눕니다. :

triangle up，triangle down，triangle left，triangle right，triangle top left，triangle top right，triangle bottom left和triangle bottom right。

추천 관련 글 :

        1.CSS를 사용하여 페이지의 다양한 방향에서 날카로운 모서리, 작은 삼각형, 날카로운 모서리 구현
2.CSS3를 사용하여 삼각형을 그리는 방법은 무엇입니까? CSS3에서 삼각형을 그리는 원리 소개
​ 관련 동영상 추천:
1.CSS 동영상 튜토리얼-Jade Girl Heart Sutra Edition
#🎜🎜 ## 🎜🎜#8가지 삼각형 구현 예

1.상부 삼각형을 위로 올린 삼각형

#triangle-up{
width:0;
height:0;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-bottom:100px solid black;
}

#🎜🎜 #2.아래쪽 삼각형 아래쪽 삼각형

#triangle-down{
width：0；
height：0；
border-left：50px solid transparent；
border-right:50px solid transparent;
border-top:100px solid black;
}

3.삼각형 왼쪽 왼쪽 삼각형

#triangle-left{
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-right:100px solid black;
}

4.오른쪽 삼각형 오른쪽 삼각형

#triangle-right{
width：0；
height：0；
border-top：50px solid transparent；
border-bottom:50px solid transparent;
border-left:100px solid black;
}

5.삼각형 왼쪽 위 삼각형

#triangle-topleft{
width：0；
height：0；
border-top：100px solid black；
border-right:100px solid transparent;
}

6. 삼각형 오른쪽 위 오른쪽 위 삼각형

#triangle-topright{
width：0；
height：0；
border-top：100px solid black；
border-left：100px solid transparent；
}

7.삼각형 아래쪽 왼쪽 아래쪽 왼쪽 삼각형

#triangle-bottomleft{
width：0；
height：0；
border-bottom：100px solid black；
border-right：100px solid transparent；
}

8. 삼각형 하단 오른쪽 하단 오른쪽 삼각형

#triangle-bottomright{
width：0；
height：0；
border-bottom：100px solid black；
border-left：100px solid transparent；
}

대략적인 효과는 그림과 같습니다.

# 🎜🎜#

위 내용은 CSS3를 사용하여 웹페이지에 다양한 삼각형 스타일 컬렉션 구현(원리 분석)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!