Bagaimana untuk Mencapai Sudut Serong pada Blok Div ​​Menggunakan Transformasi CSS3?

Menerus Sudut Div Blok

Cabaran

Dalam dokumen HTML yang mengandungi div blok dengan kelas "block1", matlamatnya ialah untuk mencipta sudut serong di sebelah kanan div, seperti yang digambarkan dalam imej yang disediakan.

Penyelesaian

Untuk mencapai kesan ini tanpa menggunakan bentuk-sudut sempadan CSS4 yang akan datang harta, kami menggunakan transformasi CSS3 bersama-sama dengan teknik berasaskan kedudukan.

Pelaksanaan

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>

Penjelasan

Pelaksanaan ini merangkumi teknik berikut:

• Transformasi CSS3: Sifat transformasi condong digunakan untuk putarkan div yang dilampirkan sebanyak 45 darjah.
• Kedudukan Mutlak: Div yang dilampirkan diposisikan secara mutlak menggunakan sifat atas dan kanan untuk mencipta sudut serong.
• Negatif Z-Index: Div yang dilampirkan diberi z-index negatif untuk membawanya ke belakang div asal.
• Manipulasi Sempadan: Sempadan-kanan div asal ditetapkan kepada sifar untuk mengelakkan jidar kedua pada tepi serong.
• Pengubahsuaian Padding: Untuk mengimbangi sempadan 1px yang dialih keluar, padding-right div asal dinaikkan sebanyak 1px.

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