Gunakan gradien kerucut untuk membuat batas yang keren
bookmark_borderbookmark
Tetap teratur dengan koleksi
Simpan dan kategorikan konten berdasarkan preferensi Anda.
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
Gradien konik
Kecuali dinyatakan lain, konten di halaman ini dilisensikan berdasarkan Lisensi Creative Commons Attribution 4.0, sedangkan contoh kode dilisensikan berdasarkan Lisensi Apache 2.0. Untuk mengetahui informasi selengkapnya, lihat Kebijakan Situs Google Developers. Java adalah merek dagang terdaftar dari Oracle dan/atau afiliasinya.
Terakhir diperbarui pada 2022-05-27 UTC.
[[["Mudah dipahami","easyToUnderstand","thumb-up"],["Memecahkan masalah saya","solvedMyProblem","thumb-up"],["Lainnya","otherUp","thumb-up"]],[["Informasi yang saya butuhkan tidak ada","missingTheInformationINeed","thumb-down"],["Terlalu rumit/langkahnya terlalu banyak","tooComplicatedTooManySteps","thumb-down"],["Sudah usang","outOfDate","thumb-down"],["Masalah terjemahan","translationIssue","thumb-down"],["Masalah kode / contoh","samplesCodeIssue","thumb-down"],["Lainnya","otherDown","thumb-down"]],["Terakhir diperbarui pada 2022-05-27 UTC."],[],[]]