如何创建指定样式的Ribbon组件？含HTML结构与CSS实现需求

基于你提供的HTML结构，我们可以将Ribbon拆分为三个横向分段来实现目标样式，以下是完整的HTML结构和对应的CSS代码：

完整HTML结构 #

<div class="header-ribbon">
  <div class="ribbon-section ribbon-light-red"></div>
  <div class="ribbon-section ribbon-dark-red"></div>
  <div class="ribbon-section ribbon-image">
    <img src="你的图片URL" alt="Ribbon展示图片">
  </div>
</div>

对应CSS代码 #

/* Ribbon容器：横向排列所有分段 */
.header-ribbon {
  display: flex;
  align-items: center;
  height: 60px; /* 可根据需求调整高度 */
  overflow: hidden;
}

/* 通用分段样式：统一高度和对齐方式 */
.ribbon-section {
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 浅红色分段：倾斜效果+对应颜色 */
.ribbon-light-red {
  width: 80px; /* 可按需调整宽度 */
  background-color: #f8baba;
  transform: skewX(15deg);
  margin-left: -15px; /* 抵消倾斜产生的左侧空隙 */
}

/* 深红色分段：反向倾斜+对应颜色 */
.ribbon-dark-red {
  width: 80px; /* 可按需调整宽度 */
  background-color: #e05555;
  transform: skewX(-15deg);
}

/* 图片分段：占满剩余空间，适配图片 */
.ribbon-image {
  flex: 1;
  background-color: #ffffff; /* 背景色可根据需求修改 */
  padding: 0 20px;
}

.ribbon-image img {
  height: 100%;
  object-fit: contain; /* 保证图片比例不变，适配容器 */
}

说明 #

• 采用Flex布局实现三个分段的横向排列，图片分段通过flex:1自动占满剩余宽度
• 使用transform: skewX()实现两个红色分段的倾斜效果，通过margin-left调整偏移避免分段间出现空隙
• 图片使用object-fit: contain保证在容器内按比例展示，不会变形

内容的提问来源于stack exchange，提问作者erniberni