Bagaimanakah anda mencapai sudut serong pada div blok menggunakan transformasi CSS3?

Meneruskan Sudut Blok Div ​​dengan CSS3

Mencapai sudut serong pada div blok pernah menjadi cabaran sebelum sudut sempadan CSS4- harta bentuk. Walau bagaimanapun, dengan transformasi CSS3, kita boleh mencipta kesan ini sambil mengekalkan harta sempadan untuk kegunaan masa hadapan.

Mari kita periksa struktur HTML dan gaya CSS untuk mencipta sudut serong:

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; /* pull it up because of 1px border */
  right: -17.5px; /* 35px / 2 */
  transform: skew(-45deg);
  -o-transform: skew(-45deg);
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
}</code>

Dalam kod CSS, kami menggunakan elemen pseudo untuk mencipta sudut serong. Elemen pseudo ini diletakkan secara mutlak dan mempunyai indeks z negatif untuk memastikan ia berada di belakang div utama. Transformasi skew() digunakan untuk memutar sudut.

Adalah penting untuk ambil perhatian bahawa sifat sempadan-kanan ditetapkan kepada 0 untuk mencipta ilusi sudut serong. Sifat sempadan kiri elemen pseudo juga ditetapkan kepada 0 untuk memastikan sudut bersih dari segi visual.

Teknik ini menambahkan sudut serong dengan berkesan untuk menyekat div, membolehkan reka bentuk yang lebih menarik secara visual.

Atas ialah kandungan terperinci Bagaimanakah anda mencapai sudut serong pada div blok menggunakan transformasi CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!