Cara Membuat Bentuk Dasar dan Lanjutan Dengan CSS Murni

Pernahkah Anda melihat situs web CSS murni di mana setiap elemen diselesaikan melalui CSS? CSS melakukan lebih dari sekadar elemen penataan. Bentuk CSS memungkinkan desainer web membuat jalur khusus seperti segitiga, lingkaran, poligon, dan lainnya. Dengan cara ini, Anda tidak lagi terkendala untuk menyisipkan gambar mengambang dengan latar belakang transparan, hanya akan dikecewakan oleh kotak persegi panjang di sekitarnya.

Dalam artikel ini, kita akan menggunakan bentuk CSS dan beberapa nilai fungsional untuk mengkode bentuk yang berbeda.

Menggambar Bentuk CSS Dasar

Mari kita mulai dengan bentuk dasar seperti persegi, persegi panjang, segitiga, lingkaran, dan elips.

Persegi dan Persegi Panjang

Persegi dan persegi panjang adalah bentuk termudah untuk dibuat di CSS. Yang perlu Anda lakukan hanyalah membuat dan berikan tinggi dan lebar.

HTML

CSS

.rec-sq {
tampilan: fleksibel;
celah: 2em;
margin: 2em;
}
.persegi {
lebar: 15rem;
tinggi: 15rem;
latar belakang: rgb (255, 123, 0);
}
.empat persegi panjang {
lebar: 24rem;
tinggi: 14rem;
latar belakang: rgb (0, 119, 128);
}

Keluaran:

Lingkaran dan Elips

Anda hanya perlu menetapkan radius batas dari 50% menjadi persegi dan Anda akan mendapatkan lingkaran. Lakukan hal yang sama dengan persegi panjang untuk mendapatkan elips.

HTML

CSS

.lingkaran {
lebar: 15rem;
tinggi: 15rem;
latar belakang: rgb (255, 123, 0);
batas-radius: 50%;
}
.elips {
lebar: 24rem;
tinggi: 14rem;
latar belakang: rgb (0, 119, 128);
batas-radius: 50%;
}

Keluaran:

segitiga

Kami akan menggunakan batas untuk membuat segitiga. Ingin tahu bagaimana cara kerjanya? Yang perlu Anda lakukan adalah mengatur lebar dan tinggi segitiga menjadi nol. Artinya, bergerak maju, lebar sebenarnya dari elemen akan menjadi lebar perbatasan. Juga, Anda mungkin sudah tahu bahwa tepi perbatasan adalah diagonal 45 derajat satu sama lain. Berikan warna yang berbeda untuk setiap perbatasan dan atur ketiganya menjadi transparan. Pada akhirnya, Anda akan memiliki segitiga Anda.

HTML

CSS

//umum untuk semua
tubuh {
tampilan: fleksibel;
celah: 5em;
margin: 15em;
}.Sampel {
tinggi: 8.5em;
lebar: 8.5em;
border-top: 1em solid #9ee780;
perbatasan-kanan: 1em solid rgb (240, 241, 141);
perbatasan-bawah: 1em solid rgb (145, 236, 252);
perbatasan-kiri: 1em solid rgb (248, 115, 106);
}.segitiga {
tinggi: 0;
lebar: 0;
border-top: 5em solid #9ee780;
perbatasan-kanan: 5em solid rgb (240, 241, 141);
perbatasan-bawah: 5em solid rgb (145, 236, 252);
perbatasan-kiri: 5em solid rgb (248, 115, 106);
}

Keluaran:

Anda bisa bermain-main dengan tinggi dan perbatasan-warna untuk mendapatkan berbagai jenis segitiga. Misalnya, Anda dapat membuat segitiga yang mengarah ke atas dengan memberikan perbatasan-bawah warna solid sementara semua batas lainnya diatur ke transparan. Selain itu, Anda dapat membuat segitiga yang menunjuk ke arah kanan atau segitiga siku-siku dengan bermain-main dengan lebar batas dan perbatasan-warna.

HTML

CSS

.segitiga-atas {
tinggi: 0;
lebar: 0;
perbatasan-atas: 5em padat transparan;
perbatasan-kanan: 5em transparan padat;
perbatasan-bawah: 5em solid rgb (145, 236, 252);
perbatasan-kiri: 5em padat transparan;
}
.segitiga-kanan {
lebar: 0;
tinggi: 0;
gaya perbatasan: padat;
lebar batas: 4em 0 4em 8em;
border-color: rgb transparan transparan transparan (245, 149, 221);
}
.segitiga-kanan-bawah {
lebar: 0;
tinggi: 0;
gaya perbatasan: padat;
lebar batas: 8em 0 0 8em;
border-color: rgb transparan transparan transparan (151, 235, 158);
}

Keluaran:

Membuat Bentuk Lanjutan Menggunakan CSS

Anda dapat gunakan ::sebelum dan ::setelahelemen semu untuk membuat bentuk lanjutan. Dengan penggunaan properti posisi dan transformasi yang cerdas, Anda dapat dengan mudah membuat bentuk kompleks menggunakan CSS murni.

Bentuk Bintang (5-Poin)

Anda harus memanipulasi batas menggunakan nilai putar dari transformasi. Idenya adalah untuk membuat dua sisi menggunakan a kelas="bintang", dua sisi lainnya menggunakan ::setelah elemen, dan sisi terakhir menggunakan ::sebelum elemen.

HTML

CSS

.bintang-lima {
margin: 3.125em 0;
posisi: relatif;
tampilan: blok;
lebar: 0em;
tinggi: 0em;
perbatasan-kanan: 6.25em padat transparan;
perbatasan-bawah: 4.3em solid rgb (255, 174, 81);
perbatasan-kiri: 6.25em padat transparan;
mengubah: memutar (35deg);
}
.bintang-lima: sebelum {
perbatasan-bawah: 5em solid rgb (255, 174, 81);
perbatasan-kiri: 2em solid transparan;
perbatasan-kanan: 1.875em padat transparan;
posisi: mutlak;
tinggi: 0;
lebar: 0;
atas: -45px;
kiri: -65 piksel;
tampilan: blok;
isi: '';
mengubah: memutar (-35deg);
}
.bintang-lima: setelah {
posisi: mutlak;
tampilan: blok;
atas: 3 piksel;
kiri: -105px;
lebar: 0;
tinggi: 0;
perbatasan-kanan: 6.25em padat transparan;
perbatasan-bawah: 4.3em solid rgb (255, 174, 81);
perbatasan-kiri: 5,95em padat transparan;
mengubah: memutar (-70deg);
isi: '';
}

Keluaran:

Segi lima

Anda dapat membuat segi lima dengan menggabungkan trapesium dan segitiga. Menggunakan berbatasan dan properti posisi membentuk dan mengelompokkannya.

HTML

CSS

.pentagon {
posisi: relatif;
lebar: 10em;
ukuran kotak: kotak konten;
lebar batas: 10em 5em 0;
gaya perbatasan: padat;
warna batas: rgb (7, 185, 255) transparan;
margin-atas: 20rem;
margin-kiri: 10rem;
}
.pentagon: sebelum {
isi: "";
posisi: mutlak;
tinggi: 0;
lebar: 0;
atas: -18em;
kiri: -5em;
lebar batas: 0 10em 8em;
gaya perbatasan: padat;
warna batas: rgb transparan transparan (7, 185, 255);
}

Keluaran:

berlian

Kelompokkan dua segitiga yang mengarah ke atas dan ke bawah menggunakan posisi untuk membuat bentuk berlian. Ya, kami akan menggunakan berbatasan properti untuk membuat segitiga ini.

HTML

CSS

.berlian {
lebar: 0;
tinggi: 0;
posisi: relatif;
atas: -3em;
perbatasan: 3em padat transparan;
border-bottom-color: rgb (129, 230, 255);
}
.berlian: setelah {
isi: '';
lebar: 0;
tinggi: 0;
posisi: mutlak;
kiri: -3em;
atas: 3em;
perbatasan: 3em padat transparan;
border-top-color: rgb (129, 230, 255);
}

Keluaran:

Anda dapat membuat bentuk perisai berlian dengan mengubah ketinggian segitiga atas seperti yang ditunjukkan di bawah ini:

HTML

CSS

.diamond-perisai
{
lebar: 0;
tinggi: 0;
perbatasan: 3em padat transparan;
perbatasan-bawah: 1.25em solid rgb (71, 194, 231);
posisi: relatif;
atas: -3em;
}
.diamond-cut: setelah {
isi: '';
posisi: mutlak;
kiri: -3em;
atas: 1.25em;
lebar: 0;
tinggi: 0;
perbatasan: 3em padat transparan;
perbatasan-atas: 4.4em solid rgb (71, 194, 231);
}

Keluaran:

Jantung

Bentuk hati agak keras tetapi Anda dapat melakukannya dengan menggunakan ::sebelum dan ::setelah elemen semu. Anda dapat menggunakan nilai yang berbeda dari mengubah untuk memutarnya dari sudut yang berbeda hingga membentuk bentuk hati dengan sempurna. Pada akhirnya, Anda dapat mengatur transformasi-asal untuk mengatur titik di mana transformasi diterapkan.

HTML

CSS

.jantung {
lebar: 6.25em;
tinggi: 55em;
posisi: relatif;
}
.hati: sebelumnya,
.hati: setelah {
isi: "";
lebar: 3em;
tinggi: 5em;
posisi: mutlak;
kiri: 3em;
atas: 0;
latar belakang: merah;
batas-radius: 3em 3em 0 0;
mengubah: memutar (-45deg);
transformasi-asal: 0 100%;
}
.hati: setelah {
kiri: 0;
mengubah: memutar (45deg);
transformasi-asal: 100% 100%;
}

Keluaran:

Bereksperimen Dengan Bentuk CSS Murni

Anda sekarang harus terbiasa dengan berbagai gambar CSS murni yang dapat dibuat dengan menulis beberapa baris kode. Membangun situs web super cepat bukanlah tugas yang sibuk lagi karena Anda tahu cara bermain-main dengan kodenya. Bagian terbaiknya adalah Anda dapat beresonansi dengan suara merek dengan memanipulasi berbagai bentuk dan warna sesuai kebutuhan Anda. Oleh karena itu, teruslah bereksperimen dan temukan cara baru untuk menggambar bentuk mengagumkan murni dengan CSS.

Cara Membuat Bilah Navigasi Responsif Menggunakan HTML dan CSS

Memanggil semua pengembang web pemula: tutorial ini akan memberi Anda keterampilan yang Anda butuhkan untuk membuat navbar respsonive Anda sendiri hanya dengan menggunakan HTML dan CSS!

Baca Selanjutnya

Tentang Penulis