Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Reben CSS Responsif dengan Sudut Dilipat?

Bagaimana untuk Mencipta Reben CSS Responsif dengan Sudut Dilipat?

DDD
DDDasal
2024-11-01 08:54:30246semak imbas

How to Create a Responsive CSS Ribbon with a Folded Corner?

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>
  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>
  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>

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!

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