CSS

Cara Membuat Simbol Hati Di CSS


Pada artikel ini saya akan membuat simbol hati di css. Simak saja langsung di bawah!


Simbol Hati

Harap kamu sudah mengetahui teknologi web seperti HTML dan CSS simbol hati yang saya buat di CSS ini cocok untuk kamu yang sedang mau ingin nembak si dia atau yang sudah mempunyai pacar hehe :D kamu bisa edit lagi entah penambahan teks atau apa. Pada penulisan artikel ini tidak terlalu panjang kamu cukup buat file html nya dengan nama index.html

<!doctype html>
   <html>
  <head>
    <title>Simbol Hati Di CSS</title>
      <link rel="stylesheet" href="style.css">
  </head>   
    
  <body>         
      <center><div class="hati"></div></center>

  </body>
</html>

Lalu kamu buat file css nya dengan nama style.css

.hati{
    position: relative;
    height: 160px;
    width: 100px;
    background: #d16ba5;
    border-radius: 200px 200px 0 0;
    transform: rotate(45deg)
}

.hati::before{
    content: "";
    position: absolute;
    background:  #d16ba5;
    height: 160px;
    width: 100px;
    transform: rotate(-90deg);
    border-radius: 200px 200px 0 0;
    left: -30px;
    top: 30px;
}

Penutup

Nah jangan lupa source code di atas harus di save jika mau ingin lihat hasilnya bisa kunjungi di sini. Semoga bermanfaat :D