Html 如何为卡片块制作侧丝带样式

<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="# ">Human Resource Management</a>
  <img src="./PCIBT - Pacific Coast Institute of Business &amp; Technology_files/pm_fundamentals.jpg "><a href="# ">Project Management Fundamentals</a>
</div>

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

Html相关问答推荐

我的表的第一列似乎是推其他2列到右边，我不能改变它

如何使用HTML和css代码在vb.net上打印POS

如何设置弹性盒子容器的具体大小？

有没有办法根据另一个项目调整FlexBox项目的大小？

水平卷轴的内容保持堆叠

Flexbox在元素之间造成了太大的差距

如何使不断增长的div不溢出其包含固定div的父级

Chatbox底部显示新消息，并向上推送旧消息

为什么 Select 元素在带有数据绑定的Blazor上行为怪异？

HTML，CSS-阻止按钮在单击时向上移动

绝对类在另一个绝对类之上

您如何动态更改 Vue 中更高级别的标签的 CSS

将图像的高度限制为固定的纵横比，并在超过时使用 object-fit

如何使我的设计适合与我的框架尺寸不同的视口？

无法使用 flexbox 裁剪图像

嵌套固定定位的 Div 滚动条渗透到前景中的 Div

HTML 标记未在页面上展开

SVG 适用于 Safari，不适用于 Chrome

在 Vue 3 中使用 JavaScript 数组显示 FontAwesome 图标

是否可以在换行时向锚标记添加填充？