Bardzo szybki CSS – tworzymy serce

Uczymy się tworzyć kształt serca wykorzystując tylko CSS oraz pseudo-elementy before i after w kreatywny sposób. Podstawy bardziej zaawansowanego CSSa.

Krok pierwszy – tworzymy element div dla naszego serca:

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

Krok drugi – resetujemy style i tworzymy prosty kwadrat:

 * {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 }

body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #262626;
}

.heart {
 position: relative;
 width: 100px;
 height: 100px;
 background-color: #ff3838;
}

Krok trzeci – nakładamy dwa kwadraty na nasz kwadrat za pomocą pseudo-elementów before i after, tworząc takie jakby kwadratowe serce o 45 stopni obrócone:

.heart::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: gold;
  transform: translateY(-50%);
}

.heart::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: blueviolet;
  transform: translateX(-50%);
}

Teraz, jeżeli przesuniemy nasz div 0 45 stopni, to zauważymy, że mamy serce ułożone z 3 kwadratów:

.heart {
(...)
transform: rotate(45deg);
}

Jedyne, czego nam brakuje, to elementom before i after nadać zaokrąglenie 50% oraz kolor oryginalnego diva:

.heart::after {
(...)
border-radius: 50%;
background-color: inherit;
}
.heart::before {
(...)
border-radius: 50%;
background-color: inherit;
}