カードブロック側面のリボン模様の作り方

Question

以下のスクリーンショットに基づいて、「完了」ステータスのブロックを追加するのに助けが必要です。

クリックしてサンプルのスクリーンショットを表示します

現在は次の構成の div だけです。

<div style="display:flex; flex-direction:column; align-items: center; justify-content: center; ">
                    <img src="./PCIBT - パシフィックコーストビジネス＆テクノロジー研究所_files/marketing_essentials.jpg "><a href="# ">マーケティングの基礎</a>
                    <img src="./PCIBT - パシフィックコーストビジネス＆テクノロジー研究所_files/human_resource_tile_pic.jpg "><a href="# ">人事管理</a>
                    <img src="./PCIBT - パシフィックコーストビジネス＆テクノロジー研究所_files/pm_fundamentals.jpg "><a href="# ">プロジェクト管理の基礎</a>
                </div>

Answer 1

完璧ではありませんが、これがカード上で行われる方法です。弓の position:Absoluteこれにより、カード上の希望の位置に弓を配置できます。

リーリー リーリー