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:
