Lebih
CSS3 Mengubah Kemiringan Satu Sisi
Apakah mungkin untuk membuat "CSS3 Transform Skew One Side &"
Saya menemukan satu solusi, tetapi tidak berguna bagi saya, karena saya perlu menggunakan gambar untuk latar belakang (bukan warna)
#skewOneSide {
border-bottom: 40px solid #FF0000;
border-left: 50px solid rgba(0, 0, 0, 0);
height: 0;
line-height: 40px;
width: 100px;
}
Bahkan [JsFiddle](http://jsfiddle.net/Hfkk7/4/) ini juga tidak berguna (area miring harus transparan)
27
3
Coba ini:
Untuk unskew gambar, gunakan div bersarang untuk gambar dan berikan nilai skew yang berlawanan. Jadi jika Anda memiliki 20deg pada induk maka Anda dapat memberikan div bersarang (gambar) nilai kemiringan -20deg.
Contoh:
http://jsfiddle.net/diegoh/mXLgF/1154/
Saya tahu ini sudah lama, tetapi saya ingin menyarankan untuk menggunakan gradien linier untuk mencapai efek yang sama daripada margin offset. Ini akan mempertahankan konten apa pun di tempat aslinya.
http://jsfiddle.net/zwXaf/2/
HTML
CSS
Anda mencoba dengan
:before
cukup dekat, satu-satunya hal yang harus Anda ubah adalah benar-benar menggunakan skew alih-alih batas: http://jsfiddle.net/Hfkk7/1101/Sunting: Pendekatan border Anda juga akan bekerja, satu-satunya hal yang Anda lakukan salah adalah menempatkan elemen sebelum di atas div Anda, sehingga border transparan tidak terlihat. Jika Anda akan memposisikan elemen semu di sebelah kiri div Anda, semuanya akan bekerja juga: http://jsfiddle.net/Hfkk7/1102/