Gunakan gradien kerucut untuk membuat batas yang keren

Gradien kerucut dapat digunakan untuk membuat beberapa efek menarik, seperti contoh batas yang bagus ini.

CodePen yang dibuat oleh Adam Argyle ini, yang awalnya dibagikan melalui tweet di Twitter, menunjukkan cara menggunakan gradien kerucut untuk membuat batas.

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}

Terry Mun dengan kreatif memotong codepen Adam dan membuat CodePen ini. Arahkan mouse ke elemen dan Anda akan melihat perubahan gradien berkat sedikit JavaScript yang mengupdate properti kustom CSS yang menyimpan sudut rotasi.

Contoh ini menggunakan properti border-image-source. Properti ini menetapkan gambar sumber yang digunakan untuk membuat batas elemen. Seperti properti lain yang menerima nilai gambar, jenis gradien CSS apa pun juga valid.

border-image-source

Dukungan Browser

  • 15
  • 12
  • 15
  • 6

Sumber

Gradien kerucut

Dukungan Browser

  • 69
  • 79
  • 83
  • 12.1

Sumber