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

Bagaimana untuk Mencapai Sudut Serong pada Blok Div ​​Menggunakan Transformasi CSS3?

Patricia Arquette
Patricia Arquetteasal
2024-10-29 13:12:03781semak imbas

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

Menerus Sudut Div Blok

Cabaran

Dalam dokumen HTML yang mengandungi div blok dengan kelas "block1", matlamatnya ialah untuk mencipta sudut serong di sebelah kanan div, seperti yang digambarkan dalam imej yang disediakan.

Penyelesaian

Untuk mencapai kesan ini tanpa menggunakan bentuk-sudut sempadan CSS4 yang akan datang harta, kami menggunakan transformasi CSS3 bersama-sama dengan teknik berasaskan kedudukan.

Pelaksanaan

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>

Penjelasan

Pelaksanaan ini merangkumi teknik berikut:

  • Transformasi CSS3: Sifat transformasi condong digunakan untuk putarkan div yang dilampirkan sebanyak 45 darjah.
  • Kedudukan Mutlak: Div yang dilampirkan diposisikan secara mutlak menggunakan sifat atas dan kanan untuk mencipta sudut serong.
  • Negatif Z-Index: Div yang dilampirkan diberi z-index negatif untuk membawanya ke belakang div asal.
  • Manipulasi Sempadan: Sempadan-kanan div asal ditetapkan kepada sifar untuk mengelakkan jidar kedua pada tepi serong.
  • Pengubahsuaian Padding: Untuk mengimbangi sempadan 1px yang dialih keluar, padding-right div asal dinaikkan sebanyak 1px.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Sudut Serong pada Blok 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