Bagaimana untuk Mencipta Sudut Serong pada Kotak CSS?

Mencipta Sudut Serong pada Kotak CSS

Mencapai sudut senget pada kotak CSS boleh dilakukan menggunakan pelbagai kaedah. Satu pendekatan diterangkan di bawah:

Kaedah Menggunakan Sempadan

Teknik ini bergantung pada mencipta sempadan lutsinar di sepanjang sebelah kiri bekas dan sempadan senget di sepanjang bawah. Kod berikut menunjukkan cara untuk melaksanakan perkara ini:

<code class="HTML"><div class="cornered"></div>
<div class="main">Hello World</div></code>

<code class="CSS">.cornered {
  width: 160px;
  height: 0px;
  border-bottom: 40px solid red;
  border-right: 40px solid white;
}
.main {
  width: 200px;
  height: 200px;
  background-color: red;
}</code>

Ini akan menghasilkan kotak dengan sudut kiri atas yang condong pada sudut 45 darjah.

Kaedah Alternatif Menggunakan Ketelusan

Untuk membenarkan teks dalam bahagian senget, jidar lutsinar tambahan boleh digunakan. Kod yang diubah suai di bawah menggambarkan pendekatan ini:

<code class="HTML"><div class="outer">
  <div class="cornered">It's possible to put text up here too
    but if you want it to follow the slant you have to stack
    several of these.</div>
  <div class="main">Hello hello hello hello
hello hello hello hello hello</div>
</div></code>

<code class="CSS">.outer {
    background-color: #ccffff;
    padding: 10px;
    font-size: x-small;
}
.cornered {
    width: 176px;
    height: 0px;
    border-bottom: 40px solid red;
    border-left: 40px solid transparent;
}
.main {
    width: 200px;
    height: 200px;
    background-color: red;
    padding: 0 8px;
}</code>

Kaedah ini mencipta sempadan senget yang boleh memaparkan teks sepanjang panjangnya.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Sudut Serong pada Kotak CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!