Cara Membuat Shape dengan CSS

Cara Membuat Shape dengan CSS - Membuat berbagai bentuk atau shape bisa kita lakukan dengan menggunakan CSS, misalnya kita ingin membuat bentuk segitiga, circle, polygon dan bentuk lainnya pada suatu objek. Ada properti yang bisa kita manfaatkan untuk membuat bentuk seperti yang kita inginkan, properti itu adalah clip-path, fungsi clip-path pada CSS untuk membuat berbagai bentuk (shape).

Berikut akan saya praktekan bagaimana Cara Membuat Shape dengan CSS yang akan saya terapkan pada objek gambar, tentu objek lain juga bisa kalian buat dengan properti clip-path. Nah, buat kalian yang ingin mencoba membuat bentuk (shape) pada objek gambar, silahkan bisa mengikuti langkah - langkahnya berikut ini.

Kebetulan pada kasus yang akan saya praktekan menggunakan objek gambar, silahkan kalian siapkan 1 gambar untuk objeknya, setelah itu kalian bisa membuat file index.html dan ketikan sintak sederhana HTML seperti berikut.

<body>
    <div class="box">
        <img src="logo-html.png">
    </div>
</body>

Jangan lupa untuk meload file gambarnya, setelah mengetikan sintak HTML diatas, selanjutnya kita akan buat gambarnya dibentuk menjadi bentuk bevel dengan memanfaatkan properti clip-path di CSS seperti berikut.

<style>
    * {padding: 0; margin-top: 0}
    .box {
        margin: 10px 20px;
        background-color: darkcyan;
        padding: 10px;
        width: 440px;
    }
    img {
        clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
    }
</style>

Pada sintak diatas peroperti clip-path sudah digunakan dengan value yang cukup banyak isinya, jika kalian bingung ada generator yang bisa kita gunakan untuk membuat berbagai macam bentuk (shape) seperti diatas, kalian bisa generate di https://bennettfeely.com/clippy/.

Nah, seperti itulah Cara Membuat Shape dengan CSS. Baik cukup sekian artikel DUMETSchool kali ini, semoga bermanfaat sampai jumpa.

19 Desember 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat