>  기사  >  웹 프론트엔드  >  CSS에서 직각 삼각형을 작성하는 방법

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

藏色散人
藏色散人원래의
2021-02-28 15:07:477746검색

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

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

이 튜토리얼의 운영 환경: 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에서 직각 삼각형을 작성하는 방법

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.