Як створити форму серця з CSS

Сьогодні ми створимо форму у вигляді серця, щоб допомогти вам розібратися з формами і позиціонуванням за допомогою CSS.

Основи

В принципі, ми можемо створити нову форму шляхом об'єднання декількох базових фігур. Якщо ми будемо розглядати форму серця, можна побачити, що вона складається з двох кіл і прямокутника. HTML-елемент, по суті, є квадратом або прямокутником. Завдяки border radius в CSS3, ми можемо з легкістю перетворити прямокутник в коло.

Додамо <div> в якості основи нашої форми.

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

Потім, ми робимо його квадратним, вказавши однакову ширину і висоту. Виберіть колір до вподоби.

.heart-shape{  
    position: relative;  
    width: 200px;  
    height: 200px;  
    background-color: rgba(250,184,66, 0.8);  
}  

Далі, створимо два кола.

Але ми не будемо додавати нові елементи. Ми використовуватимемо псевдо-елементи :before та :after. Встановимо псевдо-елемент :before як наш перший круг. Створимо квадрат, встановивши однакову ширину і висоту так само, як ми робили це з div. Потім, ми перетворимо його в коло, задаючи border-radius: 50% і розмістимо його на лівій стороні квадрата.

.heart-shape:before{  
    position: absolute;  
    bottom: 0px;  
    left: -100px;  
    width: 200px;  
    height: 200px;  
    content: '';  
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
    -o-border-radius: 50%;  
    border-radius: 50%;  
    background-color: rgba(250,184,66, 0.8);  
}  

Ми отримаємо наступний результат:

Після цього, ми створюємо друге коло з використанням :after, ті ж стилі, як і для першого кола. Потім, ми також поміщаємо його у верхній частині квадрата.

.heart-shape:after{  
    position: absolute;  
    top: -100px;  
    right: 0px;  
    width: 200px;  
    height: 200px;  
    content: '';  
      
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
    -o-border-radius: 50%;  
    border-radius: 50%;  
  
    background-color: rgba(250,184,66, 0.8);  
}  

Результат:

Ми можемо об'єднати ці два однакові стилі шляхом групування елементів псевдо-селекторів наступним чином:

.heart-shape:before,  
.heart-shape:after{  
    position: absolute;  
    width: 200px;  
    height: 200px;  
    content: '';  
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
    -o-border-radius: 50%;  
    border-radius: 50%;  
    background-color: rgba(250,184,66, 0.8);  
}  
.heart-shape:before{  
    bottombottom: 0px;  
    left: -100px;  
}  
.heart-shape:after{  
    top: -100px;  
    rightright: 0px;  
}  

У нас є форма серця, залишилось правильно її розмістити. Щоб це виправити, ми будемо використовувати CSS3 трансформації.

Трансформувати можна основні елементи форми, в нашому випадку - квадрат. При трансформації псевдо-елемент буде автоматично змінювати свою позицію згідно головного елемента.

Нам потрібно обернути наше серце.

.heart-shape{  
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  
}  

##Результат:

HTML:

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

CSS:

.heart-shape{  
    position: relative;  
    width: 200px;  
    height: 200px;  
    -webkit-transform: rotate(45deg);  
    -moz-transform: rotate(45deg);  
    -ms-transform: rotate(45deg);  
    -o-transform: rotate(45deg);  
    transform: rotate(45deg);  
    background-color: rgba(250,184,66, 1);  
}  
.heart-shape:before,  
.heart-shape:after{  
    position: absolute;  
    width: 200px;  
    height: 200px;  
    content: '';  
    -webkit-border-radius: 50%;  
    -moz-border-radius: 50%;  
    -o-border-radius: 50%;  
    border-radius: 50%;  
    background-color: rgba(250,184,66, 1);  
}  
.heart-shape:before{  
    bottombottom: 0px;  
    left: -100px;  
}  
.heart-shape:after{  
    top: -100px;  
    rightright: 0px;  
}  

Зверніть увагу, що ми тепер задати значення 1 для альфа-каналу rgba(250,184,66, 1), щоб видалити прозорість.

Ось результат:

Ми маємо ідеальну форму серця, ви можете змінити колір, якщо бажаєте (наприклад, рожевий або червоний). Єдиним недоліком є те, що ми не можемо додати границі в зв'язку з об'єднанням елементів.

#Висновки З допомогою CSS3 створення та трансформація форм - дуже проста задача. Властивість border-radius дозволяє нам перетворювати елементи або навіть псевдо-елементи в коло. З допомогою CSS3 трансформацій, ми можемо з легкістю повернути або перемістити координати об'єкта.

Ви обмежені лише власною креативністю та фантазією!