Bagaimana untuk Mencipta Sudut Serong pada Div Blok Menggunakan Transformasi CSS3?

Menggayakan Sudut Serong pada Div Blok

Dalam dokumen HTML yang disediakan, div blok standard dengan jidar pepejal ditakrifkan. Matlamatnya ialah untuk mencipta kesan sudut serong di sebelah kanan div.

Untuk mencapai kesan ini menggunakan CSS3, sifat bentuk sudut sempadan akan menjadi penyelesaian yang ideal. Walau bagaimanapun, ia masih belum disokong sepenuhnya oleh semua pelayar. Pendekatan alternatif yang memanfaatkan transformasi CSS3 menawarkan penyelesaian:

HTML:

<code class="html"><div class="box">
  Text Content
</div></code>

CSS:

<code class="css">.box {
  width: 200px;
  height: 35px;
  line-height: 35px;
  padding: 0 5px;
  background-color: #ccc;
  padding-right: 20px;
  border: solid 1px black;
  border-right: 0;
  position: relative;
}

.box:after {
  content: "";
  display: block;
  background-color: #ccc;
  border: solid 1px black;
  border-left: 0;
  width: 35px;
  height: 35px;
  position: absolute;
  z-index: -1;
  top: -1px;
  right: -17.5px;
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

Pendekatan ini melibatkan penambahan div tambahan sebagai elemen selepas .box. Div ini diletakkan sepenuhnya di atas elemen .box, dengan transformasi condong untuk mencipta kesan serong.

Untuk ilustrasi lanjut, lihat Demo JSBin yang disediakan dalam jawapan. Ambil perhatian bahawa contoh itu juga termasuk kelas div lain (box2) yang menunjukkan pelaksanaan alternatif tanpa pengisytiharan CSS3.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sudut Serong pada Div Blok Menggunakan Transformasi CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!