Read Time54 Second

Sore PisitorQue,

Buat yang lagi belajar css, pasti sering ya membuat element, tapi paling bentuknya kotak atau bulet aja gitu kan.

Terus pasti pernah liat element berbentuk diagonal yang di bikin make CSS. Nah, berikut ini saya kasih tau caranya untuk membuat element berbentuk block diagonal menggunakan CSS,

Trik Membuat Element Diagonal

Trik ini tepatnya adalah menggunakan style SkewX.

Yuk langsung aja ini scriptnya :

Style CSS dan HTML nya :
Langsung Copas dan tes aja yak.

<style>
 .diagonal {
 /*css utama untuk bikin diagonal, tinggal mainin di 'deg' nya aja*/
 -webkit-transform: skewX(-20deg);
 -moz-transform: skewX(-20deg);
 -ms-transform: skewX(-20deg);
 -o-transform: skewX(-20deg);
 transform: skewX(-20deg);
 width: 200px;
 height: 200px;
 background-color: #1961a8;
 }
 </style>

<body>
<div class="diagonal"></div>
</body>

Contoh jika sudah dirender di browser seperti ini :

Untuk mengatur derajat kemiringan di atur pada bagian skewX(-20deg);.

Terima Kasih, semoga membantu.
btw saya lagi bangun channel youtube. minta tolong bantuan di subs yak.

Subs Channel Saya yah. Thank You