세로 점 세 개 css 로 만들기

세로 점 세 개를 웹페이지에 넣으려고 특수문자표를 찾아봐도 도통찾을 수가 없다. 여기 저기 검색을 해보니 일목요연하게 정리된 곳이 있어 블로그에 복사해 놓는다

  1. 유니코드를 사용해서 만들기
    .test:after {
      content: '\2807';
      font-size: 100px;
     }

     

    <div class="test"></div>
  2. background 를 사용해서 만들기
    div {
        width: 100px;
        height: 300px;
        background-image: radial-gradient(circle at center, black 10px, transparent 10px);
        background-size: 100px 100px;
    }

     

    <div></div>

     

  3. shadow 를 사용해서 만들기
    div {
      width: 30px;
      height: 30px;
      border-radius: 50%;
        background-color: black;
      box-shadow: 0px 40px 0px black, 0px 80px 0px black;
    }

     

    <div></div>

     

  4. pseudo 요소를 사용해서 만들기
    div {
      position: relative;
      width: 20px;
      height: 20px;
      background-color: black;
      border-radius: 50%;
    }
    
    div:before, div:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0px;
      background-color: inherit;
      border-radius: inherit;
      }
    
    div:before {
      top: 40px;
      }
    
    
    div:after {
      top: 80px;
    }

     

    <div></div>

     

댓글 남기기