Gunakan gradien kerucut untuk membuat batas yang keren

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

CodePen ini dibuat oleh Adam Argyle, yang awalnya dibagikan melalui tweet ini di Twitter, menunjukkan cara menggunakan gradien konik 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 secara kreatif mem-fork codepen Adam dan membuat CodePen ini. Arahkan kursor ke elemen, lalu Anda akan melihat perubahan gradien, berkat sedikit JavaScript yang memperbarui 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 juga valid.

border-image-source

Dukungan Browser

• 15
• 12
• 15
• 6

Sumber

Gradien konik