CSS로 그리는 다양한 도형 – 사각형부터 하트까지

CSS만으로 다양하고 재미있는 도형을 만들어 보겠습니다. 모든 코드는 Codepen에서 직접 확인하고 실험할 수 있으니, 함께 따라 해 보세요!

사각형과 정사각형

모든 도형은 div 요소로 감싸서 만듭니다. 가장 기본적인 도형은 정사각형과 사각형인데, div는 기본적으로 width와 height 속성에 따라 정사각형 또는 사각형 형태를 가지기 때문입니다. 정사각형은 너비와 높이가 같고, 사각형은 그렇지 않습니다.

.rectangle {
  width: 2rem;
  height: 4rem;
  background-color: violet;
}

.square {
  width: 5rem;
  height: 5rem;
  background-color: lime;
}

참고: rem 단위는 루트(root) 폰트 크기를 기준으로 하며, 전체 크기를 손쉽게 조절할 수 있다는 장점이 있습니다. 브라우저 기본값은 보통 16px이며, 여기서는 font-size를 20px로 설정했으므로 2rem은 40px에 해당합니다.

원(Circle)

이번에는 프로필 이미지에 사용할 수 있는 원을 만들어 보겠습니다. 원을 만드는 방법은 정사각형과 비슷하지만, border-radius를 지정해야 한다는 점이 다릅니다. 모서리를 완전히 둥글게 만들려면 값을 50%로 설정하면 됩니다. 타원을 만들고 싶다면 사각형과 마찬가지로 width/height 값을 조정하면 됩니다.

프로필 이미지를 만들어 보겠습니다:

.profile-image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-image: url("https://user-images.githubusercontent.com/15071636/91342237-57ad9a00-e7a0-11ea-97bc-606a5998b29a.jpg");
  background-position: center center;
  background-size: cover;
}

참고: background 관련 속성들은 이미지를 불러오고, 크기를 맞추고, 중앙에 배치하기 위해 사용됩니다.

평행사변형(Parallelogram)

평행사변형도 만들 수 있습니다. 이 도형은 텍스트에 세련된 효과를 주고 싶을 때 특히 유용하게 활용됩니다. 여기서는 transform 속성의 skew 값을 사용해 도형(그리고 내부의 콘텐츠까지)을 20도 또는 -20도로 기울여 평행사변형으로 변형합니다.

.parallelogram {
  color: ivory;
  width: 6rem;
  height: 1.5rem;
  transform: skew(-20deg);
  background: indianred;
}

꽤 멋지죠? 😎

그 외의 도형들

CSS 도형의 기본 개념과 활용법을 익혔으니, 이제 좀 더 다양한 도형들을 살펴보겠습니다. 아래의 모든 예제 역시 Codepen에서 직접 수정해 가며 연습해 볼 수 있습니다.

.triangle {
  width: 0;
  height: 0;
  border-left: 2rem solid transparent;
  border-right: 2rem solid transparent;
  border-bottom: 5rem solid hotpink;
}

하트를 만드는 방법은 여러 가지가 있으며 온라인에서도 다양한 버전을 찾을 수 있지만, 아래 코드는 비교적 간단한 편에 속합니다.

.heart {
  width: 10rem;
  background: radial-gradient(circle at 60% 65%, goldenrod 64%, transparent 65%)
      top left, radial-gradient(
        circle at 40% 65%,
        goldenrod 64%,
        transparent 65%
      ) top right,
    linear-gradient(to bottom left, goldenrod 43%, transparent 43%) bottom left,
    linear-gradient(to bottom right, goldenrod 43%, transparent 43%) bottom right;
  background-size: 50% 50%;
  background-repeat: no-repeat;
}

.heart::before {
  content: "";
  display: block;
  padding-top: 100%;
}

백분율 값과 색상을 자유롭게 바꿔 가며 실험해 보세요. 하트가 어떻게 조립되는지 그 과정을 눈으로 확인할 수 있습니다. 이처럼 ::before와 ::after 같은 의사 요소(pseudo-element)를 활용하면 훨씬 더 다채로운 도형을 만들 수 있습니다.

또한 polygon() 함수를 사용하면 원하는 좌표를 지정해 더 복잡한 도형까지 구현할 수 있어, 표현의 폭이 한층 넓어집니다.

.letter-t {
  width: 5rem;
  height: 5rem;
  margin: 0 1rem;
  shape-outside: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 100%,
    40% 20%,
    0 20%
  );
  clip-path: polygon(
    0 0,
    100% 0,
    100% 20%,
    60% 20%,
    60% 100%,
    40% 80%,
    40% 20%,
    10% 20%
  );
  background: navajowhite;
}

마지막으로 clip-path 메이커를 꼭 확인해 보시길 권합니다. 다양한 도형의 클리핑 코드를 자동으로 생성해 주는 아주 유용한 무료 도구입니다!