Cara Membuat Background Miring dengan HTML-CSS3

Halo, ketemu lagi dengan saya 🙂 , kali ini saya akan berbagi tutorial mengenai Cara Membuat Background Miring Dengan HTML-CSS3, kalo biasanya kita memasang background horizontal, nah kali ini saya akan kasih tau cara supaya background nya miring, berikut langkah-langkahnya.

Langsung saja, silahkan kalian buat Struktur HTML seperti berikut.

<div class="skewed-bg">
	<div class="content">
		<h1 class="title">Background Miring Dengan HTML-CSS3</h1>
     <p class="text">
	</div>
</div>

Kalo sudah, lanjutkan untuk kode CSS3 berikut, untuk membuat background menjadi miring.

@import "compass/css3";

$main-color: #00B285;

body{
  background: #222;
  color: #FFF;
}

.skewed-bg{
  background: $main-color;
  padding: 200px 0;
  @include transform(skew(0deg, -10deg));
  margin-top: -200px;  
  
  .content{
    @include transform(skew(0deg, 10deg));
    text-align: center;
    
    .title{
      padding-top: 100px;
      font-weight: normal;
    }
    
    .text{
      width:60%;
      margin: 25px auto;      
      color: lighten($main-color, 55);
    }
    
  } 
}

.footer{
  padding-top: 300px;
  
  .credits{
    text-align: center;
    color: #666;
    
    .link{
      color: $main-color;
      text-decoration: none;
    }
    
  }
  
}

Nah, kalo sudah, simpan dulu, kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Selesai

Cukup mudah yah ? baik sampai disini tutorial mengenai Cara Membuat Background Miring Dengan HTML-CSS3, semoga bermanfaat, amin.

Selamat mencoba 🙂