CSS로 삼각형을 만드는 방법

CSS로 삼각형을 만드는 방법: 먼저 HTML 샘플 파일을 만든 다음 p를 만들고 마지막으로 "테두리 색상: 투명 투명 빨간색 투명"과 같은 속성을 통해 삼각형 효과를 얻습니다.

이 기사의 운영 환경: windows7 시스템, HTML5&&CSS3 버전, DELL G3 컴퓨터

CSS로 삼각형을 만드는 방법은 무엇입니까?

CSS로 삼각형 만드는 법을 가르쳐주세요

오늘은 Max가 CSS로 삼각형을 만드는 기술을 공유합니다~
삼각형을 만드는 방법은요? ? ?
서두르지 말고, 서두르지 말고, 차근차근 해봅시다.

제작 방법

먼저 p를 작성합니다:

.triangle{
    height: 100px;
    width: 100px;
    border:100px solid ;
    border-color: red orange blue purple;
}

효과는 다음과 같습니다.

그런 다음 클래스 이름이 p1인 p는 너비와 높이가 100px이고 테두리가 100px입니다. , 위, 아래, 왼쪽 및 오른쪽 테두리는 빨간색, 파란색, 보라색, 주황색입니다. (무늬가 아름답지 않나요?)
그러면 이것이 삼각형과 무슨 상관이냐고 물으실 수도 있습니다.
자, 다음 단계로 넘어가겠습니다. p의 너비와 높이를 0으로 설정하세요.
화면에 4색 사각형이 있는데 이 사각형은 4개의 삼각형 테두리로 구성되어 있습니다.
이때 원하는 방향으로 이동하고 나머지 삼각형은 투명하게 설정하면 됩니다.
여기서 투명성 속성은 (투명)입니다.
예를 들어 위쪽 화살표가 있는 빨간색 삼각형을 원할 경우 코드는 다음과 같습니다.

.triangle-red{
    height: 0px;
    width: 0px;
    border:100px solid ;
    border-color: transparent transparent red transparent;
}

효과는 다음과 같습니다.

어서 시도해 보세요! 왼쪽 위, 왼쪽 아래, 오른쪽 위, 오른쪽 아래로 삼각형을 만들 수도 있습니다. 예를 들어 왼쪽 위:

.triangle-red{
    height: 0px;
    width: 0px;
    border-top: 100px solid red;
    border-right: 100px solid transparent;
}

렌더링:

권장 학습: "css 비디오 튜토리얼"

위 내용은 CSS로 삼각형을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!