Membuat Section Menjadi Miring pada HTML CSS

Membuat Section Menjadi Miring pada HTML CSS - pernahkah kalian melihat sebuah website yang memiliki tampilan setiap section nya menjadi miring? Biasanya template tersebut dipadukan dengan konten efek parallax. Nahh kali ini kita akan coba belajar untuk membuat section menjadi miring dan konten yang ada tetap nyaman dibaca. Langsung saja kita simak caranya.

Pertama kita buat sebuah file html, lalu kita buat sebuah struktur baru seperti ini

<header>
    <div class="container">
        <h1>My Website</h1>
    </div>
</header>
<section class="service">
    <div class="section-container">
        <h2>Service Section</h2>
        <p>Ini paragraf section service</p>
    </div>
</section>
<section class="article">
    <div class="section-container">
        <h2>Article Section</h2>
        <p>Ini paragraf section article</p>
    </div>
</section>

Pada struktur diatas, saya menggunakan dua jenis container, yaitu container biasa, dan section-container. Tujuan dibuatnya dua container berbeda yaitu untuk membuat perbedaan antara section yang ingin di buat miring ataupun dengan yang tidak miring..

Baiklah, sebelum kita membuat konten miring, kita akan buat css untuk tampilan dasarnya terlebih dahulu

*{margin: 0;padding: 0}
header{height: 150px}
header h1 {margin: 30px }
.service{background-color: green;height: 200px; text-align: center;}
.article{background-color: lightgreen;height: 300px}

Dengan begitu kita bisa lihat tampilannya seperti ini

Selanjutnya yang kita perlukan adalah memberikan overflow-x pada body, dengan value hidden karena nantinya kita akan memiringkan tag section sehingga aka nada ukuran berlebih pada section secara horizontal., jika sudah maka kita buat css untuk masing – masing container

.container{
    margin: auto;
    width: 800px;
}
.section-container{
    transform:rotate(-2deg);
    margin: auto;
    width: 800px;
}

Selanjutnya kita akan membuat css untuk section yang telah kita buat dengan css seperti ini

section {
          width:105%;
          transform:rotate(2deg) translateX(-1%);
          padding: 30px 0 ;
        }

Pada elemen diatas saya menggunakan rotate(2deg) pada section untuk memiringkan section tersebut, lalu saya juga memberikan rotate(-2deg) agar elemen yang ada di dalam section tetap dalam keadaan normal (tidak ikut miring).

Maka kira – kira hasilnya akan terlihat seperti ini.

Demikian artikel ini yang membahas tentang Membuat Section Menjadi Miring pada HTML CSS, semoga bermanfaat