So erstellen Sie ein Bandmuster auf der Seite eines Kartenblocks

Question

Anhand des Screenshots unten benötige ich Hilfe beim Hinzufügen eines Blocks mit dem Status „Abgeschlossen“.

Klicken Sie hier, um einen Beispiel-Screenshot anzuzeigen

Derzeit nur ein Div mit der folgenden Konfiguration.

<div style="display:flex; flex-direction:column; align-items: center; justify-content: center; ">
                    <img src="./PCIBT - Pacific Coast Institute of Business &amp; Technology_files/marketing_essentials.jpg "><a href="# ">Marketing Essentials</a>
                    <img src="./PCIBT - Pacific Coast Institute of Business &amp; Technology_files/human_resource_tile_pic.jpg "><a href="# ">Personalmanagement</a>
                    <img src="./PCIBT - Pacific Coast Institute of Business &amp; Technology_files/pm_fundamentals.jpg "><a href="# ">Grundlagen des Projektmanagements</a>
                </div>

Answer 1

不完美，但这是如何在卡片上完成的，position: absolute在蝴蝶结上允许您将蝴蝶结定位在所需位置的卡片上。

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