Bagaimana untuk Mencapai Kesan Sudut Serong pada Elemen Div Menggunakan Transformasi CSS3?

Cara Membuat Sudut Serong pada Elemen Div Menggunakan Transformasi CSS3

Masalah:

Pertimbangkan dokumen HTML dengan elemen div dengan sempadan lurus. Bagaimanakah kita boleh mengubah suai gayanya untuk mencapai sudut serong, seperti yang ditunjukkan dalam imej di bawah?

[Imej elemen div dengan sudut serong]

Jawapan:

Sementara bentuk sempadan-sudut sifat CSS4 masih dalam peringkat awal pembangunannya, penyelesaian menggunakan transformasi CSS3 boleh dilaksanakan:

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>

Teknik ini melibatkan mencipta elemen div berbentuk segi tiga dengan pencongan yang diubah dan kedudukan mutlak untuk mencapai kesan serong. Ambil perhatian bahawa elemen div tambahan dengan kelas "box2" turut disertakan dalam HTML dan CSS, yang menggambarkan pendekatan alternatif tanpa menggunakan pengisytiharan CSS3.

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