[CSS] 삼각형 만들기

<style>
    .box {
        width:0; 
        height:0; 
        border-top:100px solid #000000; 
        border-bottom:100px solid #000000; 
        border-left:100px solid #dddddd; 
        border-right:100px solid #000000;
    }
</style>
<div class="box1"></div>

• 간단한게 해당 속성의 width와 height가 삼각형의 크기를 정하는게 아닌 border의 두깨가 삼각형의 크기를 결정한다
  
  
  
  
  
  
  

• 색의 경우 배경색과 동일하게 안보이는 부분을 설정해줄 수 있지만 여기서는 rgba(0,0,0,0) 을 이용하여 투명하게 처리했다.