HTML로 삼각형을 만들려면 어떻게해야합니까?

Question

기본 CSS를 사용하여 HTML 페이지에서 삼각형을 만들고 싶습니다. 나는 삼각형 사진을 사용하여로드하는 데 시간이 걸리므로, 내 페이지의 로딩 시간을 줄이고 싶습니다.

Answer 1

HTML에서는 가능하지 않지만 CSS에서는 가능합니다. 예 :

<div class="triangle></div> 

.triangle { 
    width: 0; 
    height: 0; 
    border: solid 30px; 
    border-color: transparent transparent black transparent; 
} 

라이브 데모 : 폭과 높이 다음 border 속성 jsFiddle

• 30px의 크기를 정의합니다. 더 작거나 더 큰 삼각형을 원할 경우 변경할 수 있습니다.
• 삼각형을 회전하려면 및 transparent 위치를 border-color 속성으로 전환하십시오. 이것은 CSS 삼각형 만드는 방법에 대한 최선의 설명이다 jsFiddle

Answer 2

참조 : 너비 또는 높이 않고있는 div를 작성하여 http://www.uselesspickles.com/triangles/

을 경계 삼각형을 만들어 결국 당신은 국경의 일부를 떠날 때 투명한.

신용이 페이지는 다른 사용자가이 트릭을 알아 내기 전에 동료가 작성했습니다.

#tri { 
 
    width: 0; 
 
    height: 0; 
 
    border-top-width: 20px; 
 
    border-top-style: solid; 
 
    border-top-color: transparent; 
 
    border-right-width: 20px; 
 
    border-right-style: solid; 
 
    border-right-color: red; 
 
}

<div id="tri"></div>

jsFiddle demo

Answer 3

CSS를 삼각형을 만드는 뒤에 비결은

1. 빈 div
2. 는 높이를 확인 작성하고 폭 0
3. 반대쪽 두면에 동일한 테두리 폭을 지정하고 투명하게 만듭니다.
4. 동일한 세 번째 테두리에 너비를 지정하고 단색을 지정하십시오.

희망이 도움이됩니다.

는 확인이 jsFiddle