Cara membuat corak reben di sisi blok kad

Question

Berdasarkan tangkapan skrin di bawah, saya memerlukan bantuan menambah blok dengan status "Selesai".

Klik untuk melihat contoh tangkapan skrin

Pada masa ini hanya div dengan konfigurasi berikut.

<div style="display:flex; flex-direction:column; align-items: center; justify-content: center; ">
                    <img src="./PCIBT - Institut Perniagaan Pantai Pasifik & Technology_files/marketing_essentials.jpg "><a href="# ">Keperluan Pemasaran</a>
                    <img src="./PCIBT - Institut Perniagaan & Teknologi Pantai Pasifik/human_resource_tile_pic.jpg "><a href="# ">Pengurusan Sumber Manusia</a>
                    <img src="./PCIBT - Institut Perniagaan & Technology_files/pm_fundamentals.jpg Pantai Pasifik "><a href="# ">Asas Pengurusan Projek</a>
                </div>

Answer 1

Tidak sempurna, tetapi inilah cara ia dilakukan pada kad, position: absolutePada haluan yang membolehkan anda meletakkan haluan di tempat yang anda inginkan pada kad.

  .card {
    display: flex;
    align-items: center;
    position: relative;
    width: 300px;
    height: 150px;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 20px;
    background-color: #fff;
  }
  
  .ribbon {
    position: absolute;
    top: 10px;
    left: 0px;
    background-color: #e74c3c;
    color: #fff;
    padding: 5px 15px;
  }

<div class="card">
    <div class="ribbon">Side Offer</div>
    <h3>Card Content</h3>
    <p>This is some content inside the card.</p>
  </div>