html + css 手写漏斗图

要使用HTML和CSS手写一个漏斗图，你可以按照以下步骤进行：

1. HTML结构：

首先，我们需要定义漏斗图的HTML结构。漏斗图通常由多个部分（或阶段）组成，每个部分代表一个步骤或转化过程。

<div class="funnel">
    <div class="funnel-stage" style="--stage-width: 100%; --stage-color: #f00;">阶段1</div>
    <div class="funnel-stage" style="--stage-width: 80%; --stage-color: #0f0;">阶段2</div>
    <div class="funnel-stage" style="--stage-width: 60%; --stage-color: #00f;">阶段3</div>
    <!-- 更多阶段 -->
</div>

在这个结构中，我们使用了CSS变量（--stage-width 和 --stage-color）来动态设置每个阶段的宽度和颜色。

2. CSS样式：

接下来，我们需要为漏斗图编写CSS样式。我们将使用伪元素（::before）来创建每个阶段的图形，并利用border属性来绘制三角形。

.funnel {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.funnel-stage {
    position: relative;
    height: 50px; /* 你可以根据需要调整这个值 */
    line-height: 50px; /* 使文本垂直居中 */
    text-align: center;
    margin-bottom: 20px; /* 调整阶段之间的间距 */
}

.funnel-stage::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px calc((100vw - var(--stage-width) * 1vw) / 2) 25px calc((100vw - 100%) / 2); /* 调整边框宽度以形成漏斗形状 */
    border-color: transparent transparent var(--stage-color) transparent; /* 设置底部边框颜色为阶段颜色 */
    transform: translateX(-50%); /* 使漏斗图居中 */
}

注意：这个示例使用了视口宽度单位（vw）来使漏斗图具有响应性。你可能需要根据实际情况调整数值。

3. 调整和测试：

最后，你需要对漏斗图进行调整和测试，以确保它在不同屏幕尺寸下都能正确显示。你可以使用Chrome开发者工具来模拟不同设备并进行调试。

请注意，这个示例是一个简化的版本，主要用于演示如何使用HTML和CSS创建漏斗图。在实际项目中，你可能需要添加更多样式和功能来满足特定需求。