CSS로 삼각형 및 여러 도형 표현하기

항상 이미지를 잘라서 'background:url(img.png) 0 0 no-repeat;'의 방법으로 사용하곤 했는데 css로 표현이 가능해졌다.

 

 

CSS로 삼각형 표현하기

css-tricks.com/snippets/css/css-triangle/

CSS Triangle | CSS-Tricks

 

색상 등을 수정하여 좀 더 다양한 형태의 삼각형을 만들 수 있다.

말풍선의 꼬리부분이나 목록의 포인트 부분 등에 응용하여 사용하면 좋을 듯.

 

브라우저는 크롬, 파폭, 사파리 등등 문제는 없는 것 같고 ie의 경우는 9 이상부터 지원되는 것 같다.

 

<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>

.arrow-up {
  width: 0; 
  height: 0; 
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0; 
  height: 0; 
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  
  border-top: 20px solid #f00;
}

.arrow-right {
  width: 0; 
  height: 0; 
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  
  border-left: 60px solid green;
}

.arrow-left {
  width: 0; 
  height: 0; 
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent; 
  
  border-right:10px solid blue; 
}

 

 

 

 

 

삼각형 외에도 다양한 도형 표현이 가능하다.

css-tricks.com/the-shapes-of-css/

The Shapes of CSS | CSS-Tricks

 

 

원형

#circle {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 50%
}

 

 

별

#star-five {
      margin: 50px 0;
      position: relative;
      display: block;
      color: red;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      transform: rotate(35deg);
    }
    #star-five:before {
      border-bottom: 80px solid red;
      border-left: 30px solid transparent;
      border-right: 30px solid transparent;
      position: absolute;
      height: 0;
      width: 0;
      top: -45px;
      left: -65px;
      display: block;
      content: '';
      transform: rotate(-35deg);
    }
    #star-five:after {
      position: absolute;
      display: block;
      color: red;
      top: 3px;
      left: -105px;
      width: 0px;
      height: 0px;
      border-right: 100px solid transparent;
      border-bottom: 70px solid red;
      border-left: 100px solid transparent;
      transform: rotate(-70deg);
      content: '';
    }

 

 

 

 

 

쉽게 테스트하고 css 코드 딸 수 있는 곳

csstriangle.firebaseapp.com/

triangle

www.html-code-generator.com/css/triangle-generator

CSS Triangle Generator | CSS Arrow