CSS로 하트 모양 만들기

CSS만으로 하트를 만드는 방법은 사각형이나 원형과 같은 기본 도형을 조합하는 방식으로 구현할 수 있습니다. 주로 ::before, ::after 가상 요소와 border-radius를 사용하여 하트 모양을 구성합니다.

<div class="heart"></div>

/* 하트 모양 */
.heart {
    position: relative;
    width: 100px;
    height: 100px;
    background-color: red;
    transform: rotate(-45deg);
    margin: 50px;
}

/* 하트의 왼쪽 원형 부분 */
.heart::before,
.heart::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: red;
    border-radius: 50%;
}

/* 왼쪽 상단의 원 */
.heart::before {
    top: -50px;
    left: 0;
}

/* 오른쪽 상단의 원 */
.heart::after {
    top: 0;
    right: -50px;
}

설명

1. 기본 하트 모양 (.heart):
   • width와 height를 100px로 설정하고, background-color를 빨간색(red)으로 설정합니다.
   • transform: rotate(-45deg);을 사용해 사각형을 45도 회전시켜 하트의 아래쪽 부분을 만듭니다.
2. 가상 요소로 원형 부분 추가 (::before, ::after):
   • ::before와 ::after를 사용하여 상단에 두 개의 원형을 추가합니다.
   • 각각의 가상 요소는 border-radius: 50%로 설정하여 원형을 만들었고, 위치는 position: absolute;로 지정하여 배치했습니다.
   • ::before는 왼쪽 상단에, ::after는 오른쪽 상단에 배치되어 두 원이 결합하여 하트의 윗부분을 형성합니다.

요약

• CSS로 하트를 만들 때 div 요소를 기본 도형으로 활용하고, 가상 요소를 사용하여 상단의 두 원을 결합합니다.
• transform: rotate(-45deg);을 사용해 사각형을 기울이고, border-radius: 50%로 원을 만들어 하트 모양을 완성했습니다.