Всем привет, сегодня я расскажу, как нарисовать сердце с помощью html и css.
Результат будет выглядеть так:
Я также в конце размещу короткий видеоролик, как я написал код и ссылку на сам код программы с Codepen.
Содержимое html
Если вы пишете в Codepen, то формальный шаблон html вам не нужен и можно начать писать сразу содержимое <body>.
Наше сердечко будет состоять из двух частей, поэтому создаем два тега <div> и назначаем им class - heart и heart1.
C html все, теперь переходим в css
Сначала задаем стили для первого элемента.
position:relative; - обязательная строчка, она показывает, что поверх этого элемента могут налезать другие элементы.
width:50px; - задаем размер по ширине
height:75px; - задаем размер по высоте
border:1px solid black; - граница элементов, чтобы видеть их границы, толщина 1px, сплошная и черная.
border-radius:100px 100px 0 0; - то, что задает закругление нашего элемента, каждая цифра это сила закругления с одного угла фигуры.
transform:rotate(45deg); - поворачиваем фигуру на 45 градусов.
background-color:IndianRed; - задаем фигуре цвет.
margin-left:50px; - и пододвигаем фигуру.
вот так выглядеть должно на данном этапе:
теперь вторая часть сердечка
здесь мы изменили position на absolute, что показывает, что на данную фигуру другие налезать не могут, но она сама будет лежать поверх других
изменяем поворот второй части, теперь она равна 315 градусам(360-45)
и наконец подравниваем по размеру, чтобы не торчали никакие края
все, сердечко готово)
как и обещал видео, где я это делаю:
и код с Codepen: https://codepen.io/VadosVad/pen/VwMzQYx
До скорых встреч!