css 아이콘 구현 하기 +, 별모양 , 반달, 말풍선 모양등

 

css로 생각보다 다양한 종류의 모양을 만들수 있는데 아래 사이트에 가면 기본적인 사각형 타원형 부터 별모양, 화살표, 하트, 팔각형등 다양한 모양 만드는 방법을 확인할 수 있습니다.

 

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

The Shapes of CSS | CSS-Tricks

 

 

 

 

만약 돋보기 모양을 만들고 싶다면

아래로 쭉쭉 내려보면 돋보기 아이콘이 있습니다.

<div id="magnifying-glass"></div>

인스턴스를 생성해서 해당 아이디를 넣어주고

아래 css를 복사해서 붙여주기만 하면됩니다.

#magnifying-glass {
      font-size: 10em;
      display: inline-block;
      width: 0.4em;
      box-sizing: content-box;
      height: 0.4em;
      border: 0.1em solid red;
      position: relative;
      border-radius: 0.35em;
    }
    #magnifying-glass:before {
      content: "";
      display: inline-block;
      position: absolute;
      right: -0.25em;
      bottom: -0.1em;
      border-width: 0;
      background: red;
      width: 0.35em;
      height: 0.08em;
      transform: rotate(45deg);
    }