CSS 삼각형 만들기

css triangle 이라 구글에 검색하면 잘 나오겠지만 그래도 설명하도록겠다.

#triangle {
    background: purple;
    width :150px;
    height:150PX;
    border-left: 50px solid yellow ;
    border-right: 50px solid green;
    border-bottom: 50px solid red;
    border-top: 50px solid blue;
}

왼쪽, 오른쪽, 아래, 위 경계선을 한눈에 알 수가 있다.

이때 Width, Height 가 없게 될 경우, 

 이런 모양으로 표시된다.

만일 border-left, right, top부분을 transparent를 하게 될 경우, 빨간색 부분만 남게 되어 삼각형이 만들어지게 된다.

다만 top 부분은 지정을 해주지 않아야 삼각형 위 빈공간을 차지하지 않게 된다.

#triangle {
    background: purple;
    width :0px;
    height:0PX;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 50px solid red;
}

반응형 삼각형을 만들고 싶다 할 경우엔

/*Up pointing*/

.triangle-up {

    width: 10%;

    height: 0;    

    padding-left:10%;

    padding-bottom: 10%;

    overflow: hidden;

}

.triangle-up:after {

    content: "";

    display: block;

    width: 0;

    height: 0;

    margin-left:-500px;

    border-left: 500px solid transparent;

    border-right: 500px solid transparent;

    border-bottom: 500px solid #4679BD;

}

식으로 하면된다.

참조문서

http://jsfiddle.net/josedvq/3HG6d/

http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work