픽셀이나 백분율을 사용하여 div 모서리에 삼각형을 어떻게 그릴 수 있습니까?

Div 모서리에 삼각형 그리기

질문:

웹 페이지에서 어떻게 삼각형을 그릴 수 있나요? 특정 픽셀 값이나 백분율 값을 사용하여 div 모서리에 배치하시겠습니까?

답변:

이를 달성하는 데는 두 가지 주요 접근 방식이 있습니다.

절대 위치 지정 및 테두리 트릭 사용:

1. 삼각형 요소의 위치를 ​​절대적으로 지정하고 위쪽 및 오른쪽 속성을 0으로 설정합니다.
2. 테두리를 사용하여 삼각형의 크기를 정의합니다. 너비 및 테두리 색상 속성. 예를 들어, 다음 코드는 테두리 트릭을 사용하여 오른쪽 상단에 녹색 삼각형을 그립니다.

<code class="css">.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 30px 30px 0;
  border-color: transparent #608A32 transparent transparent;
  right: 0;
  top: 0;
  position: absolute;
}</code>

회전 및 자르기 사용:

1. div 내부에 상대적으로 삼각형 요소를 배치합니다.
2. transform:rotate(45deg)를 사용하여 삼각형 요소를 45도 회전합니다.
3. 오버플로를 사용하여 div 경계 너머로 확장되는 여분의 삼각형을 숨깁니다. 숨겨져 있습니다.

다음은 이 접근 방식을 사용하는 예입니다.

<code class="css">.container {
  position: absolute;
  top: 5%;
  left: 5%;
  width: 60%;
  height: 30%;
  background: black;
  color: white;
  border-radius: 12px;
  overflow: hidden;
}

.triangle {
  position: relative;
  top: 10%;
  left: 90%;
  width: 10%;
  height: 10%;
  -webkit-transform: rotate(45deg);
  background: green;
}</code>

두 방법 모두 백분율 또는 절대값을 사용하여 삼각형의 모양과 위치를 사용자 정의할 수 있으므로 웹 페이지에 유연성을 제공합니다. 디자인.

위 내용은 픽셀이나 백분율을 사용하여 div 모서리에 삼각형을 어떻게 그릴 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!