Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Reben CSS Responsif dengan Sudut Dilipat?
Ia adalah mungkin untuk mencipta reben CSS responsif dengan lipatan sudut menggunakan langkah berikut:
Buat bekas: Cipta div bekas untuk memegang reben.
<code class="css">.container { width: 200px; height: 200px; position: relative; margin: 20px; overflow: hidden; }</code>
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>
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>
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!