CSS에서 직각 삼각형을 작성하는 방법

CSS에서 직각 삼각형을 작성하는 방법: 먼저 HTML 샘플 파일을 만든 다음 밑면의 너비를 제거하여 이등변 직각 삼각형을 얻습니다. 마지막으로 위쪽의 너비를 넓혀 원하는 직각 삼각형을 만듭니다.

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

CSS를 사용하여 직각 삼각형 작성

<style>
/*原理：第一步*/
.box1{
	width: 0;
	height: 0;
	border-top: 50px solid green;
	border-right: 50px solid red;
	border-bottom: 0px solid yellow; /*1.底边去除就变成直角三角形*/
	border-left: 50px solid blue;
}

/*原理：第二步*/
.box2{
	width: 0;
	height: 0;
	border-top: 100px solid green; /*2.上边拉长就会变成直接三角形*/
	border-right: 50px solid red;
	border-bottom: 0px solid yellow; /*1.底边去除就变成直角三角形*/
	border-left: 50px solid blue;
}

/*实现*/
.box{
	width: 0;/*1.设置宽高为0*/
	height: 0;
	/*2.除右边都变透明色，实边*/
	border-color: transparent red transparent transparent;
	border-style: solid;
	border-width: 100px 50px 0 0; /*3.上边宽100，右边宽50，下左边宽0*/

}
</style>
原理第一步，去除底边宽度，实现等腰直角三角形：
<p></p>
原理第二步，加宽上边宽度，实现想要直角三角形：
<p></p>
实现，把上边，左边边变透明色：
<p></p>

[권장: "css 동영상 튜토리얼"]

효과:

원리 첫 번째 단계는 밑변 너비를 제거하고 이등변 직각 삼각형을 구현하는 것입니다.

원리 두 번째 단계는 원하는 직각삼각형을 구현하기 위해 윗변의 폭을 넓히는 것입니다:

이를 달성하려면 윗변과 왼쪽을 투명하게 만드세요:

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