Bagaimanakah anda boleh membuat sudut serong untuk div blok dalam CSS tanpa menggunakan bentuk sudut sempadan?

Mencapai Sudut Serong untuk Div ​​Blok dalam CSS

Tugas untuk menggayakan div blok dengan sudut serong boleh didekati dengan pelbagai cara . CSS4 border-corner-shape kekal sebagai pilihan, namun pelaksanaannya masih belum selesai. Oleh itu, kami akan menyelidiki penyelesaian menggunakan transformasi CSS3.

Pelaksanaan Menggunakan Transformasi CSS3

Dalam dokumen HTML, cipta elemen div dengan kelas yang dikehendaki nama untuk blok.

HTML:

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

Tentukan penggayaan dalam CSS seperti berikut:

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);
}

Penyelesaian ini mengekalkan harta sempadan asal utuh, menjadikannya tersedia untuk pelarasan selanjutnya. Untuk demonstrasi praktikal, rujuk Demo JSBin yang disediakan.

Penyelesaian Alternatif Menggunakan Div Kedua

Untuk kesederhanaan, pertimbangkan pelaksanaan CSS lain yang mencapai hasil yang serupa menggunakan div kedua tanpa CSS3. Lihat kelas box2 dalam CSS yang disediakan sebelum ini.

Atas ialah kandungan terperinci Bagaimanakah anda boleh membuat sudut serong untuk div blok dalam CSS tanpa menggunakan bentuk sudut sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!