Cara Membuat Shape dengan CSS

19/12/2019    Risman Hakim    73     Website

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.

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More