javascript - 水平 CSS 漏斗

Question

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

我看过一些例子here和 here并且还发现了以下 link但我无法让漏斗侧放。我什至不确定我是否在寻找正确的东西。

以前有没有人创造过类似的东西。

已更新这是一个fiddle到目前为止我所做的一切

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

Answer 1

为了创建漏斗，我添加了 fiddle

<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;
}