Funnel Diagram - HTML/CSS

by Ben Clayton

HTML

<div id="funnel-container">
  <div class="funnel" id="f1">
    <div class="name">
      [% data.0.0 %]ATTRACT
    </div>
    <div class="value">
      100
    </div>
  </div>
  <div class="funnel" id="f2">
    <div class="name">
      ENGAGE
    </div>
    <div class="value">
      50
    </div>
  </div>
  <div class="funnel" id="f3">
    <div class="name">
      ENTER SALE MODE
    </div>
    <div class="value">
      25
    </div>
  </div>
  <div class="funnel" id="f4">
    <div class="name">
      PEOPLE PURCHASED
    </div>
    <div class="value">
      15
    </div>
  </div>
</div>

CSS

#funnel-container {
  width: 340px;
  height: 400px;
  margin: 0 auto;
}

.funnel {
   margin: 0 auto;
	 border-left-bottom:10px;
	 height: 0; 
	background-color:transparent;
}

.funnel#f1 {
  width: 280px;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 70px solid #6060D0;
}

.funnel#f2 {
  width: 220px;
	  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 70px solid #D0D0FF;
}

.funnel#f3 {
  width: 160px;
	  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 70px solid #C0C010;
}
.funnel#f4 {
  width: 100px;
	  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-top: 70px solid #C08010;
}



.funnel .name {
  text-align: center;
	position:relative;
	top: -60px;
	font-size:12px;
}

.funnel .value {
  text-align: center;
	position:relative;
	top: -60px;
	font-size:30px;
}

JavaScript

['Attract', 100],
            ['Engage', 50],
            ['Enter Sale Mode', 25],
            ['Purchase', 15]