Bagaimana untuk Mencipta Tepi Serong untuk Div ​​Tanpa Sempadan?

Buat Tepi Serong ke Div: Pendekatan Novel

Dalam percubaan untuk mencipta div senget tanpa menggunakan sempadan, kami meneroka penyelesaian alternatif yang mengekalkan responsif dan membenarkan pemasukan teks tanpa gangguan daripada kesan senget.

Menggunakan Elemen Pseudo Serong

Kunci untuk mencapai tepi senget terletak pada penggunaan elemen pseudo senget. Dengan memasukkan elemen ini, kami memisahkan warna latar belakang daripada kandungan div. Berikut ialah pelaksanaannya:

div {
  position: relative;
  display: inline-block;
  padding: 1em 5em 1em 1em;
  overflow: hidden;
  color: #fff;
}

div:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  -webkit-transform-origin: 100% 0;
  -ms-transform-origin: 100% 0;
  transform-origin: 100% 0;
  -webkit-transform: skew(-45deg);
  -ms-transform: skew(-45deg);
  transform: skew(-45deg);
  z-index: -1;
}

Penjelasan

Elemen pseudo diposisikan secara mutlak dalam div. Sifat transform-origin ditetapkan pada sudut kanan bawah elemen, memastikan bahawa kesan condong berasal dari titik itu. Pencongan sebenar digunakan melalui sifat transformasi, memutar elemen 45 darjah mengikut lawan jam. Dengan memberikan elemen pseudo indeks z negatif, kami meletakkannya di belakang kandungan div, dengan berkesan menyembunyikan bahagian yang melimpah.

Pendekatan ini membolehkan kami menambah teks dalam div tanpa menjejaskan kesan tepi senget.

Contoh

<div>slanted div text</div>
<div>
  slanted div text<br/>
  on several lines<br/>
  an other line
</div>
<div>wider slanted div text with more text inside</div>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Tepi Serong untuk Div ​​Tanpa Sempadan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!