Jak zrobić serduszko walentynkowe w HTML/CSS?

Dziś Walentynki i chcielibyśmy zaproponować coś specjalnego dla naszych czytelników. Dzisiaj chcemy pokazać, jak stworzyć serduszko walentynkowe w CSS.

Aby stworzyć serduszko, będziemy używać pseudoelementów ::before i ::after w połączeniu z transformacją i obramowaniem. Wystarczy dodać klasę „heart” do elementu HTML, aby uzyskać pełne serce.

Oto kod CSS, który stworzy serduszko walentynkowe:

.heart {
  position: relative;
  width: 50px;
  height: 50px;
}

.heart::before,
.heart::after {
  position: absolute;
  content: "";
  left: 25px;
  top: 0;
  width: 25px;
  height: 40px;
  background: red;
  border-radius: 25px 25px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
}

.heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

Możesz oczywiście dostosować wielkość i kolor serduszka do swojego projektu.

Aby uzyskać pełne serce, możesz dodać klasę „heart” do elementu HTML:

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

Mamy nadzieję, że ten krótki artykuł pomógł Ci stworzyć serduszko walentynkowe w CSS. Daj znać w komentarzach, czy udało Ci się to zrobić i czy masz jakieś inne ciekawe pomysły na projektowanie stron internetowych związanych z Walentynkami.

Oto efekt:

Przeczytaj także

Nowa odsłona IT Agencji!
Ciekawe polskie gry z premierą w 2021 roku
Nowe narzędzia dla projektantów stron www – Lipiec 2021
Praca zdalna – przydatne narzędzia w trakcie pandemii
Najlepsze narzędzia IT dla branży gastronomicznej
Jak stworzyć stronę przyjazną dla Google?
Jak przygotować się do badania UX w Twoim projekcie
Czy warto używać języka PHP? Kiedy najlepiej go wykorzystać?
Jak zwiększyć autorytet swojej domeny dzięki SEO (Domain Authority)?
Paradoks Webdesignera: uproszczenie projektu jedną z najtrudniejszych czynności
Tylko jeden nagłówek H1 na stronie? Niekoniecznie!
Dziś Dzień Singla! 8 najlepszych aplikacji randkowych w 2023 roku

POPROŚ O WYCENĘ