Javascript 水平漏斗

我的任务是创建一个漏斗，如下所示

我看了一些例子和例子 我还发现了下面的东西，但我不能让漏斗侧着。 我甚至不确定我是否在看正确的东西

以前有人创造过这样的东西吗

已更新 以下是我到目前为止所做工作的一部分

  <div class="container">

        <div style="float:left;width:200px;height:140px;background:#E34743"></div>
        <div class="arrow-right float-left"></div>


        <div class="trapezoid-second"></div>
        <div class="trapezoid-second-last"></div>
        <div class="trapezoid-last"></div>

        <div class='float-left' style="margin-top: -15px;">
            <div class="green-box"></div>
            <div class="green-box"></div>
            <div class="green-box"></div>
        </div>

    </div>

---

链接到JS库的地方如何创建动态漏斗：漏斗的形状取决于内容。使用d3js（陡峭学习曲线），您可以创建动态水平漏斗

但是：您的图片/屏幕截图不是动态的。看起来图片的形状总是一样的，只是文字不同

这将更容易：

• 创建一个大背景图片，并在上面布局文本。这是一个快速而肮脏的解决方案。如果你想让图片表现出反应性，那就不是正确的路线
• 用css重新创建所有的形状。可能涉及将不同元素缝合在一起。这将允许您根据数字更改一个零件的背景色

---

您可以查看：有关css形状的更多信息。

为了创建漏斗，我添加了

品牌帖子
品牌帖子
品牌帖子
品牌帖子
24719
积极的用户
+483%W/W
16719
订婚+点击
+483%W/W
24719
总覆盖范围**
+483%W/W
2869966
总印象

+263%W/W
2441
约定（喜欢、评论、分享）
14k
点击
815
新页面
身体{
文本对齐：居中；
背景色：#262626；
}
.盒子{
利润率：0.1px；
}
.上边框{
宽度：0；
身高：0；
边框顶部：45px实心#5475B6；
右边框：150px实心#5475B6；
边框底部：60px实心#5475B6；
边框顶部：10px实心透明；
}
.底边{
宽度：0；
身高：0；
边框顶部：45px实心#5475B6；
右边框：150px实心#5475B6；
边框顶部：60px实心#5475B6；
边框底部：10px实心透明；
}
.方框内容{
背景#5475B6；
位置：绝对位置；
保证金：自动0；
宽度：149px；
利润上限：-35px；
}
1号包厢{
利润上限：-10px；
左边距：-20px；
}
.盒子2{
利润上限：-20px；
}
.框2.上边框{
边框底宽：70px；
}
.box.2.下边框{
边框顶部宽度：70px；
}
.三号包厢{
利润上限：-30px；
}
.盒子3.上边框{
边框底宽：80px；
}
.box.3.下边框{
边框顶部宽度：80px；
}
.四号包厢{
利润上限：-40px；
}
.方框4.上边框{
边框底宽：90px；
}
.box.4.底部边框{
边框顶部宽度：90px；
}
h1，
挑选{
边缘底部：20px；
}
.集装箱{
利润上限：200px；
}
#漏斗{
宽度：300px；
高度：400px；
保证金：0自动；
}
.绿盒子{
宽度：200px；
高度：66px；
边缘底部：1px；
背景#70A444；
}
.向左浮动{
浮动：左；
}
.向右箭头{
宽度：0；
身高：0；
边框顶部：60px实心透明；
边框底部：60px实心透明；
左边框：20px实心#E34743；
位置：相对位置；
左边距：0px；
z指数：2；
}
.向下箭头{
宽度：0；
身高：0；
左边框：70px实心透明；
右边框：70px实心透明；
边框顶部：20px实心#fff；
左边距：-1px；
}
.白色标题{
颜色：白色；
字体大小：20px；
显示：块；
线高：30px；
溢出：隐藏；
文本溢出：省略号；
字体大小：22px；
字号：600；
}
.白色小号{
字体大小：12px；
颜色：白色；
线高：25px；
}
p{
保证金：0；
填充：0；
}
.绿框内容{
颜色：白色；
位置：相对位置；
垫面：5px；
}
.green box content>.large{
字体大小：22px；
字号：600；
}
.green box content>.small{
字体大小：13px；
}
.红色箭头{
浮动：左；
宽度：200px；
高度：120px；
背景#E34743；
}
.红边{
宽度：自动；
宽度：100%；
高度：29px；
显示：内联块；
保证金：自动；
位置：相对位置；
}

我建议考虑使用SVG，而不是CSS。在CSS中做这类事情应该是完全可能的，但是SVG可能会更容易，如果你以后需要做任何更改，肯定会更灵活。我想这些都是有效的选项，我真的不需要使用d3js，这只是我得到的示例。我不认为漏斗会增长，假设它会增长，我不想重新创建的背景图像，如果我走这条路线。加上一个，因为我使用你的方法创建每个部分单独。我的需求略有变化，但我成功地创建了它。

<div class="container">
    <div class="red-arrow">
        <div class="red-border">Brand Posts</div>
        <div class="red-border">Brand Posts</div>
        <div class="red-border">Brand Posts</div>
        <div class="red-border">Brand Posts</div>

    </div>
    <div class="arrow-right float-left" style="z-index:3;">

    </div>
    <div class="arrow-right float-left" style="border-left-color:#262626;margin-left: -15px;"></div>
    <div class="box one" style="position:relative;float:left">
        <div class="top-border"></div>
        <div class="box-content">

            <p class="white-header">24,719</p>
            <p class="white-small">Engaged Users</p>
            <p class="white-small">+483% W/W</p>

        </div>
        <div class="bottom-border"></div>
    </div>
    <div class="box two" style="position:relative;float:left">
        <div class="top-border"></div>
        <div class="box-content">

            <p class="white-header">16,719</p>
            <p class="white-small">Engagements + clicks</p>
            <p class="white-small">+483% W/W</p>

        </div>
        <div class="bottom-border"></div>
    </div>
    <div class="box three" style="position:relative;float:left">
        <div class="top-border"></div>
        <div class="box-content">

            <p class="white-header">24,719</p>
            <p class="white-small">Total Reach**</p>
            <p class="white-small">+483% W/W</p>

        </div>
        <div class="bottom-border"></div>
    </div>
    <div class="box four" style="position:relative;float:left">
        <div class="top-border"></div>
        <div class="box-content">

            <p class="white-header">2,869,966</p>
            <p class="white-small">Total impressions</p>
            <p class="white-small">+263% W/W</p>

        </div>
        <div class="bottom-border"></div>
    </div>
    <div class='float-left' style="margin-top: -40px; padding-left: 5px;">
        <div class="green-box">

            <div class="green-box-content">
                <p class="large">2,441</p>
                <p class="small">Engagements (likes, Comments, Shares)</p>
            </div>

        </div>
        <div class="green-box">
            <div class="green-box-content">
                <p class="large">14k</p>
                <p class="small">clicks</p>
            </div>
        </div>
        <div class="green-box">
            <div class="green-box-content">
                <p class="large">815</p>
                <p class="small">New Page Likes</p>
            </div>
        </div>
    </div>
</div>


body {
    text-align: center;
    background-color: #262626;
}

.box {
    margin: 0 1px;
}

.top-border {
    width: 0;
    height: 0;
    border-top: 45px solid #5475B6;
    border-right: 150px solid #5475B6;
    border-bottom: 60px solid #5475B6;
    border-top: 10px solid transparent;
}

.bottom-border {
    width: 0;
    height: 0;
    border-top: 45px solid #5475B6;
    border-right: 150px solid #5475B6;
    border-top: 60px solid #5475B6;
    border-bottom: 10px solid transparent;
}

.box-content {
    background: #5475B6;
    position: absolute;
    margin: auto 0;
    width: 149px;
    margin-top: -35px;
}

.box.one {
    margin-top: -10px;
    margin-left: -20px;
}

.box.two {
    margin-top: -20px;
}

.box.two .top-border {
    border-bottom-width: 70px;
}

.box.two .bottom-border {
    border-top-width: 70px;
}

.box.three {
    margin-top: -30px;
}

.box.three .top-border {
    border-bottom-width: 80px;
}

.box.three .bottom-border {
    border-top-width: 80px;
}

.box.four {
    margin-top: -40px;
}

.box.four .top-border {
    border-bottom-width: 90px;
}

.box.four .bottom-border {
    border-top-width: 90px;
}

h1,
select {
    margin-bottom: 20px;
}

.container {
    margin-top: 200px;
}

#funnel {
    width: 300px;
    height: 400px;
    margin: 0 auto;
}

.green-box {
    width: 200px;
    height: 66px;
    margin-bottom: 1px;
    background: #70A444;
}

.float-left {
    float: left;
}

.arrow-right {
    width: 0;
    height: 0;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 20px solid #E34743;
    position: relative;
    margin-left: 0px;
    z-index: 2;
}

.arrow-down {
    width: 0;
    height: 0;
    border-left: 70px solid transparent;
    border-right: 70px solid transparent;
    border-top: 20px solid #fff;
    margin-left: -1px;
}

.white-header {
    color: white;
    font-size: 20px;
    display: block;
    line-height: 30px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 22px;
    font-weight: 600;
}

.white-small {
    font-size: 12px;
    color: white;
    line-height: 25px;
}

p {
    margin: 0;
    padding: 0;
}

.green-box-content {
    color: white;
    position: relative;
    padding-top: 5px;
}

.green-box-content > .large {
    font-size: 22px;
    font-weight: 600;
}

.green-box-content > .small {
    font-size: 13px;
}

.red-arrow {
    float: left;
    width: 200px;
    height: 120px;
    background: #E34743;
}

.red-border {

    width: auto;
    width: 100%;
    height: 29px;
    display: inline-block;
  margin:auto;
  position: relative;
}