CSS에서 삼각형을 설정하는 방법: 먼저 HTML 샘플 파일을 만든 다음 범위 요소를 블록 수준 요소로 설정하고 테두리의 네 면을 서로 다른 색상으로 설정하고 마지막으로 너비를 설정하여 삼각형을 구현합니다. 상단 테두리와 왼쪽 및 오른쪽 테두리.
이 튜토리얼의 운영 환경: Windows 7 시스템, HTML5&&CSS3 버전, Dell G3 컴퓨터.
CSS를 사용하여 삼각형 설정
1. 개발 중에 때로는 일부 작은 삼각형을 사용하여 요소를 강조하거나 표시하여 다른 프로젝트를 구별한 다음 삼각형을 더 명확한 색상으로 그려서 작동합니다. 그럼 어떻게 삼각형을 그릴 수 있는 걸까요? 최근에 몇몇 웹페이지에서 마킹을 하는 걸 봤는데, 마킹할 때 모두 배경 이미지를 사용해서 웹페이지가 표시될 때 느낌이 좀 그렇네요. 결국 이미지 로딩은 CSS 로딩만큼 원활하지 않습니다.
코드를 살펴보겠습니다. 여기서는 스팬 요소가 블록 수준 요소로 설정되어 있고 테두리의 네 면은 다음과 같습니다. 다른 색상으로 설정:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100%; margin: 50px 0; text-align: center; } span { position: relative; margin: 0 auto; display: block; width: 50px; height: 50px; border-style: solid; border-width: 50px; border-top-color: red; border-left-color: blue; border-bottom-color: yellow; border-right-color: black; } </style> </head> <body> <div>如何设置三角形?</div> <div> <span> </span> </div> </body> </html>
실행 결과: 네 변에 테두리가 발견되었는데 실제로는 이런 사다리꼴 구조입니다. 사다리꼴의 위쪽과 아래쪽을 0으로 바꾸면 우리가 원하는 삼각형이 되지 않을까요? 게다가 HTML이나 CSS로는 구현할 수 없습니다. 아니오 이미지가 불연속적으로 표시되는 문제가 있습니다.
다음 단계는 사다리꼴의 상단과 하단을 변경하는 것입니다. to 0 [권장: "css 비디오 튜토리얼"]
매우 간단합니다. 요소의 상단과 하단을 0 Gao로 변경하고 Kuan을 0으로 설정하세요.
width: ------ & gt; 0 위쪽 및 아래쪽 화살표 가져오기
Height: ------- & gt; 0
1 위쪽 화살표를 원할 때 요소의 왼쪽 및 오른쪽 테두리를 제거합니다
2. 아래쪽 화살표를 원할 때 요소의 왼쪽 및 오른쪽 테두리와 위쪽 테두리를 제거합니다. 3. 왼쪽 화살표를 원할 때 위쪽, 아래쪽 및 오른쪽 테두리를 제거합니다4. 오른쪽 화살표를 원하시면 위쪽, 아래쪽 및 왼쪽 테두리만 제거하세요아이디어가 좋습니다. 시도해보고 생각했습니다. 화살표를 추가하려면 다음과 같이 CSS를 설정하세요.span { position: relative; margin: 0 auto; display: block; width: 0px; height: 0px; border-style: solid; border-width: 50px; /* 设置上边框和左右边框宽度为0 开始*/ border-top-width: 0; border-left-width: 0; border-right-width: 0; /* 设置上边框和左右边框宽度为0 开始*/ border-top-color: red; border-left-color: blue; border-bottom-color: yellow; border-right-color: black; }
그럼 방법을 바꿔보겠습니다. 너비를 설정해도 안 되므로 색상을 설정하겠습니다. 왼쪽 상단만 넣고, 오른쪽 테두리 색상을 투명하게 설정하면 충분하지 않나요? ? CSS에는 색상을 투명하게 설정하는 값이 있습니다
span { position: relative; margin: 0 auto; display: block; width: 0px; height: 0px; border-style: solid; border-width: 50px; /* 设置上边框和左右边框宽度为0 开始*/ border-top-color: transparent; border-left-color: transparent; border-right-color: transparent; /* 设置上边框和左右边框宽度为0 开始*/ /* border-top-color: red; border-left-color: blue; */ border-bottom-color: yellow; /* border-right-color: black; */ }
실행 결과: OK, 끝났습니다! ! !
아래쪽 화살표 설정:
span { position: relative; margin: 0 auto; display: block; width: 0px; height: 0px; border-style: solid; border-width: 50px; /* 设置上边框和左右边框宽度为0 开始*/ border-bottom-color: transparent; border-left-color: transparent; border-right-color: transparent; /* 设置上边框和左右边框宽度为0 开始*/ border-top-color: red; /* border-left-color: blue; border-bottom-color: yellow; border-right-color: black; */ }
왼쪽 화살표 설정:
span { position: relative; margin: 0 auto; display: block; width: 0px; height: 0px; border-style: solid; border-width: 50px; /* 设置上边框和左右边框宽度为0 开始*/ border-top-color: transparent; border-bottom-color: transparent; /* border-left-color: transparent; */ border-right-color: transparent; /* 设置上边框和左右边框宽度为0 开始*/ /* border-top-color: red; */ border-left-color: blue; /* border-bottom-color: yellow; border-right-color: black; */ }
오른쪽 화살표 설정:
span { position: relative; margin: 0 auto; display: block; width: 0px; height: 0px; border-style: solid; border-width: 50px; border-top-color: transparent; border-bottom-color: transparent; border-left-color: transparent; /* border-right-color: transparent; */ /* border-top-color: red; border-left-color: blue; border-bottom-color: yellow; */ border-right-color: black; }
물론 CSS도 가능합니다 같이 쓰면 더 간단해 보이네요:
span { position: relative; margin: 0 auto; display: block; width: 0px; height: 0px; /* 先后设置上右下左的border-color属性都是一样的,需要哪个箭头,再设置哪个方向的颜色属性,这样,最后设置的属性覆盖了前面的属性,就变成箭头了 */ border: 50px solid transparent; border-top-color: red; }
위는 html과 css를 조합해 만든 화살표 세트인데 좀 더 간단하게 만들 수 있을까요?
아래에서는 클래스 속성을 사용하여 화살표가 필요하면 클래스 속성을 직접 추가하면 됩니다. 화살표가 필요하지 않으면 클래스를 제거하면 됩니다.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 100%; margin: 50px 0; text-align: center; } .jindaobox { position: relative; width: 980px; margin: 20px auto; } li { list-style: none; float: left; position: relative; border: 1px solid #eee; margin-right: 30px; padding: 10px 20px; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; } .active { border: 1px solid red !important; } .active::after { position: absolute; content: ""; height: 0; width: 0; border: 8px solid transparent; border-top-color: red; top: 0; left: 0; right: 0; margin: auto; } </style> </head> <body> <div>请选择你喜欢的电影</div> <ul> <li>飞龙在天</li> <li class="lis active">紫川</li> <li>封神演义</li> <li class="lis active">风云第一刀</li> <li>天外飞仙</li> </ul> </body> </html>
이렇게 하면 클래스 속성을 사용하여 화살표를 제어하는 방법이 구현됩니다. 선택해야 할 경우 li 요소에 활성 클래스 속성을 추가하면 됩니다. 활성 클래스 속성.
위 내용은 CSS에서 삼각형을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!