0 0
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

About Post Author

TahuBanyak

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post Pengertian Media Query pada CSS
Next post Lightning Truncheon item Combo – Mobile Legends Bang Bang

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *