Bagaimana untuk Mencipta Reben CSS Responsif dengan Sudut Dilipat?

Cara Membuat Reben CSS Responsif dengan Sudut Dilipat

Mencipta Reben dengan CSS

Ia adalah mungkin untuk mencipta reben CSS responsif dengan lipatan sudut menggunakan langkah berikut:

1. Buat bekas: Cipta div bekas untuk memegang reben.

   <code class="css">.container {
     width: 200px;
     height: 200px;
     position: relative;
     margin: 20px;
     overflow: hidden;
   }</code>

   Salin selepas log masuk

2. Tambah segi empat tepat latar belakang: Tambahkan div kanak-kanak di dalam bekas dengan warna latar belakang pepejal untuk mewakili reben.

   <code class="css">.box {
     width: 100%;
     height: 100%;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0.8; /* for demo purpose  */
   }</code>

   Salin selepas log masuk

3. Buat reben: Tambah div kanak-kanak lain di dalam bekas dan gunakan gaya berikut:

   <code class="css">.stack-top {
     height: 30px;
     z-index: 9;
     margin: 40px; /* for demo purpose  */
     transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
     transition: transform 2s;
     color: #fff;
   }</code>

   Salin selepas log masuk

Penyelesaian Alternatif

Untuk reka bentuk reben yang lebih terperinci dan boleh disesuaikan, anda boleh meneroka sumber seperti https://css-generators.com/ribbon-shapes/. Laman web ini membolehkan anda memilih pelbagai bentuk reben dan menjana kod CSS untuknya.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Reben CSS Responsif dengan Sudut Dilipat?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!