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

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

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

要么更容易：

创建一个大背景图片并在其上布置文本。这是一个快速的＆amp;肮脏的解决如果您希望图片具有响应性，则不是正确的路线。
使用css重新创建所有形状。可能涉及将不同元素拼接在一起。这将允许你例如根据数字改变一部分的背景颜色。

您可以查看：https://css-tricks.com/examples/ShapesOfCSS/了解有关css形状的更多信息。

Answer 2

设法创建了漏斗，我添加了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;
}

水平CSS漏斗

2 个答案: