我的任务是创建一个如下所示的漏斗...
我看过一些例子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>
最佳答案
为了创建漏斗,我添加了 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;
}
关于javascript - 水平 CSS 漏斗,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32902855/