如何实现可按指定高度填充颜色的菱形效果？

你之前用border+伪元素实现菱形的方式虽然可行，但要控制填充高度确实很麻烦。推荐用CSS变量 + clip-path + 线性渐变的方案，既能保持菱形形状，又能通过变量轻松控制填充高度和颜色，代码更简洁灵活。

最终实现代码 #

HTML

<!-- 直接通过style属性传入填充高度和颜色 -->
<div class="diamond" style="--fill-height: 60%; --fill-color: #ff4444;"></div>

CSS

.diamond {
  /* 菱形的基础尺寸，可通过变量调整 */
  --size: 100px;
  width: var(--size);
  height: var(--size);
  /* 用clip-path定义菱形路径，比border写法更直观 */
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  /* 线性渐变实现填充：--fill-height控制填充的终止位置 */
  background: linear-gradient(
    to bottom,
    var(--fill-color, red) 0 var(--fill-height, 0%),
    transparent var(--fill-height, 0%) 100%
  );
}

方案说明 #

• 动态控制填充：通过--fill-height变量传入百分比值（比如30%、75%），直接控制填充高度，不需要修改CSS结构
• 自定义颜色：--fill-color变量可以指定填充颜色，默认值为红色
• 简洁结构：不需要伪元素，单个div就能实现效果，维护成本更低
• 响应式适配：如果需要调整菱形大小，只需要修改--size变量即可

示例用法 #

• 填充30%高度：

<div class="diamond" style="--fill-height: 30%;"></div>

• 填充80%高度，蓝色填充：

<div class="diamond" style="--fill-height: 80%; --fill-color: #2196f3;"></div>

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