CSS

Cara Membuat Berlian Di CSS


Pada artikel ini saya akan membuat berlian di CSS pada artikel sebelumnya saya telah membuat simbol hati di CSS kamu bisa lihat di sini. Simak saja langsung di bawah!


Berlian

Pada penulisan artikel di sini tidak akan terlalu panjang sekali harap kamu sudah tahu teknologi web seperti HTML dan CSS. Seperti biasa kamu perlu membuat file HTML nah buat file tersebut dengan nama index.html

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

  </body>
</html>

Nah setelah itu buat file CSS nya dengan nama style.css

body{
    background-color: darkblue;
}

.berlian{
    width:50px;
    position: relative;
    border-width: 0 30px 30px 30px;
    border-style: solid;
    border-color:transparent;
    border-bottom-color:#FAFAFA;
}

.berlian::before{
    content: "";
    position: absolute;
    border-width: 75px 55px 0 55px;
    border-style: solid;
    border-color: transparent;
    border-top-color:#FAFAFA;
    top:30px;
    left:-30px;
}

Penutup

Nah hasil tersebut bisa di lihat di sini. Semoga bermanfaat :D