Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencapai Kesan Sudut Serong pada Elemen Div Menggunakan Transformasi CSS3?

Bagaimana untuk Mencapai Kesan Sudut Serong pada Elemen Div Menggunakan Transformasi CSS3?

DDD
DDDasal
2024-11-01 05:36:27210semak imbas

How to Achieve a Beveled Corner Effect on a Div Element Using CSS3 Transforms?

Cara Membuat Sudut Serong pada Elemen Div Menggunakan Transformasi CSS3

Masalah:

Pertimbangkan dokumen HTML dengan elemen div dengan sempadan lurus. Bagaimanakah kita boleh mengubah suai gayanya untuk mencapai sudut serong, seperti yang ditunjukkan dalam imej di bawah?

[Imej elemen div dengan sudut serong]

Jawapan:

Sementara bentuk sempadan-sudut sifat CSS4 masih dalam peringkat awal pembangunannya, penyelesaian menggunakan transformasi CSS3 boleh dilaksanakan:

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>

Teknik ini melibatkan mencipta elemen div berbentuk segi tiga dengan pencongan yang diubah dan kedudukan mutlak untuk mencapai kesan serong. Ambil perhatian bahawa elemen div tambahan dengan kelas "box2" turut disertakan dalam HTML dan CSS, yang menggambarkan pendekatan alternatif tanpa menggunakan pengisytiharan CSS3.

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

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn