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)

Hakan Fıstık
Pertanyaan edit 4 April 2017 в 12:03
Pemrograman
html5 css3 css css-shapes
4 November 2013 в 3:28
28 tayangan
Larutan

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.

.container {
  overflow: hidden;
}

#parallelogram {
  width: 150px;
  height: 100px;
  margin: 0 0 0 -20px;
  -webkit-transform: skew(20deg);
  -moz-transform: skew(20deg);
  -o-transform: skew(20deg);
  background: red;
  overflow: hidden;
  position: relative;
}

.image {
  background: url(http://placekitten.com/301/301);
  position: absolute;
  top: -30px;
  left: -30px;
  right: -30px;
  bottom: -30px;
  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -o-transform: skew(-20deg);
}
<div class="container">
  <div id="parallelogram">
    <div class="image"></div>
  </div>
</div>

Contoh:

http://jsfiddle.net/diegoh/mXLgF/1154/

Roko C. Buljan
Jawaban edit 6 April 2017 в 1:15
Komentar (1)

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

<ul>
    <li><a href="#">One</a></li>
    <li><a href="#">Two</a></li>
    <li><a href="#">Three</a></li>
</ul>

CSS

/* reset */
ul, li, a {
    margin: 0; padding: 0;
}
/* nav stuff */
ul, li, a {
    display: inline-block;
    text-align: center;
}
/* appearance styling */
ul {
    /* hacks to make one side slant only */
    overflow: hidden;
    background: linear-gradient(to right, red, white, white, red);
}
li {
    background-color: red;
     transform:skewX(-20deg);
    -ms-transform:skewX(-20deg);
    -webkit-transform:skewX(-20deg);
}
li a {
    padding: 3px 6px 3px 6px;
    color: #ffffff;
    text-decoration: none;
    width: 80px;
     transform:skewX(20deg);
    -ms-transform:skewX(20deg);
    -webkit-transform:skewX(20deg);
}
Komentar (0)

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/

Komentar (1)