Creating a Stylish Funnel Graph using CSS

Question

Creating a Stylish Funnel Graph using CSS

I am currently working on customizing a funnel chart based on data from my database that is displayed on the page. Everything is functioning correctly except for the CSS rendering of the chart.

    <ul id="funnel-cht">
<li style="height:70px;width:50%;background-color:yellow">pendora</li>
<li style="height:70px;width:40%;background-color:#98bf26">pending</li>
<li style="height:70px;width:30%;background-color:orange">pen</li>
<li style="height:70px;width:20%;background-color:#c10000">Test</li>
</ul>

This is how it appears at the moment- http://jsfiddle.net/m74ets8v/1/

I would like to enhance its appearance to resemble an actual funnel chart, similar to this example-

What steps should I take to properly style this chart for better visualization?

html css charts

Answer 1

Answer №1

.funnel_outer{width:420px;float: left;position: relative;padding:0 10%;}
.funnel_outer *{box-sizing:border-box}
.funnel_outer ul{margin:0;padding:0;}
.funnel_outer ul li{float: left;position: relative;margin:2px 0;height: 50px;clear: both;text-align: center;width:100%;list-style:none}
.funnel_outer li span{ border-top-width: 50px;border-top-style:  solid; border-left: 25px solid transparent; border-right:25px solid transparent; height: 0;display: inline-block;vertical-align: middle; } 
.funnel_step_1 span{width:100%;border-top-color: #8080b6;}
.funnel_step_2 span{width:calc(100% - 50px);border-top-color: #669966}
.funnel_step_3 span{width:calc(100% - 100px);border-top-color: #a27417}
.funnel_step_4 span{width:calc(100% - 150px);border-top-color: #ff66cc}
.funnel_step_5 span{width:calc(100% - 200px);border-top-color: #0099ff}
.funnel_step_6 span{width:calc(100% - 250px);border-top-color: #027002}
.funnel_step_7 span{width:calc(100% - 300px);border-top-color: #ff0000;}
.funnel_outer ul li:last-child span{border-left: 0;border-right: 0;border-top-width: 40px;}
.funnel_outer ul li.not_last span{border-left: 5px  solid transparent;border-right:5px  solid transparent;border-top-width:50px;}
  .funnel_outer ul li span p{margin-top: -30px;color:#fff;font-weight: bold;text-align: center;}

<div class="funnel_outer">
<ul>
<li class="funnel_step_1"><span><p>1</p></span></li>
<li class="funnel_step_2"><span><p>2</p></span> </li>
<li class="funnel_step_3"><span><p>3</p></span></li>
<li class="funnel_step_4"><span><p>4</p></span></li>
<li class="funnel_step_5"><span><p>5</p></span></li>
<li class="funnel_step_6"><span><p>6</p></span></li>
<li class="funnel_step_7"><span><p>7</p></span></li>

</ul>
</div>

Answer 2

.funnel_outer{width:420px;float: left;position: relative;padding:0 10%;}
.funnel_outer *{box-sizing:border-box}
.funnel_outer ul{margin:0;padding:0;}
.funnel_outer ul li{float: left;position: relative;margin:2px 0;height: 50px;clear: both;text-align: center;width:100%;list-style:none}
.funnel_outer li span{ border-top-width: 50px;border-top-style:  solid; border-left: 25px solid transparent; border-right:25px solid transparent; height: 0;display: inline-block;vertical-align: middle; } 
.funnel_step_1 span{width:100%;border-top-color: #8080b6;}
.funnel_step_2 span{width:calc(100% - 50px);border-top-color: #669966}
.funnel_step_3 span{width:calc(100% - 100px);border-top-color: #a27417}
.funnel_step_4 span{width:calc(100% - 150px);border-top-color: #ff66cc}
.funnel_step_5 span{width:calc(100% - 200px);border-top-color: #0099ff}
.funnel_step_6 span{width:calc(100% - 250px);border-top-color: #027002}
.funnel_step_7 span{width:calc(100% - 300px);border-top-color: #ff0000;}
.funnel_outer ul li:last-child span{border-left: 0;border-right: 0;border-top-width: 40px;}
.funnel_outer ul li.not_last span{border-left: 5px  solid transparent;border-right:5px  solid transparent;border-top-width:50px;}
  .funnel_outer ul li span p{margin-top: -30px;color:#fff;font-weight: bold;text-align: center;}

<div class="funnel_outer">
<ul>
<li class="funnel_step_1"><span><p>1</p></span></li>
<li class="funnel_step_2"><span><p>2</p></span> </li>
<li class="funnel_step_3"><span><p>3</p></span></li>
<li class="funnel_step_4"><span><p>4</p></span></li>
<li class="funnel_step_5"><span><p>5</p></span></li>
<li class="funnel_step_6"><span><p>6</p></span></li>
<li class="funnel_step_7"><span><p>7</p></span></li>

</ul>
</div>

Answer 3

Answer №2

To ensure horizontal alignment of the li elements, simply utilize margin: 0 auto. This will centrally position a block element by calculating automatic margins for the left and right dimensions. Keep in mind that this method does not apply to vertical centering.

Here is an adjusted version of your code presented in a functional example:

ul, li { margin: 0; padding: 0; list-style: none; }
ul { width: 400px; }
li { height: 70px; margin: 0 auto; }

/* REMINDER: Utilizing nth-child provides a more efficient way to assign CSS to a group of identical elements instead of assigning individual classes to each li element. However, simplicity is key at this moment */

li.li1 { width: 50%; background-color: yellow; }
li.li2 { width: 40%; background-color: #98bf26; }
li.li3 { width: 30%; background-color: orange; }
li.li4 { width: 20%; background-color: #c10000; }

<ul>
  <li class='li1'>pendora</li>
  <li class='li2'>pending</li>
  <li class='li3'>pen</li>
  <li class='li4'>Test</li>
</ul>

It's worth mentioning, as indicated in the comments: To achieve actual trapezoid shapes, you may need to incorporate SVG and ensure adequate fallback options for browsers that lack support for it.

Answer 4

To ensure horizontal alignment of the li elements, simply utilize margin: 0 auto. This will centrally position a block element by calculating automatic margins for the left and right dimensions. Keep in mind that this method does not apply to vertical centering.

Here is an adjusted version of your code presented in a functional example:

ul, li { margin: 0; padding: 0; list-style: none; }
ul { width: 400px; }
li { height: 70px; margin: 0 auto; }

/* REMINDER: Utilizing nth-child provides a more efficient way to assign CSS to a group of identical elements instead of assigning individual classes to each li element. However, simplicity is key at this moment */

li.li1 { width: 50%; background-color: yellow; }
li.li2 { width: 40%; background-color: #98bf26; }
li.li3 { width: 30%; background-color: orange; }
li.li4 { width: 20%; background-color: #c10000; }

<ul>
  <li class='li1'>pendora</li>
  <li class='li2'>pending</li>
  <li class='li3'>pen</li>
  <li class='li4'>Test</li>
</ul>

It's worth mentioning, as indicated in the comments: To achieve actual trapezoid shapes, you may need to incorporate SVG and ensure adequate fallback options for browsers that lack support for it.

Answer 5

Answer №3

From what I gather in the comments, all you have to do is center the <li> elements by using an auto margin.

#funnel-cht>li
{
    display:block;
    margin:0 auto;
}

Answer 6

From what I gather in the comments, all you have to do is center the <li> elements by using an auto margin.

#funnel-cht>li
{
    display:block;
    margin:0 auto;
}

Creating a Stylish Funnel Graph using CSS

Answer №1

Answer №2

Answer №3

Similar questions

Tips for implementing code to function across several images in HTML and CSS

The CSS will dynamically adjust the width of the DIVs based on the browser size, allowing for more DIVs per

The browser is able to cache the selected state of a select tag and will disregard any instances where selected=

Maintain the expanded menu even after selecting a sub-item using jQuery

Reducing URL query parameters

My React project is not showing the text in the way that I had envisioned

Developing a universal.css and universal.js file for a custom WordPress theme

Cascading Style Sheets can be disrupted by Scalable Vector Graphics

What could be causing justify-content: flex-start; to not function as expected?

As the div elements stack up and you scroll towards the top or bottom

Achieving perfect alignment of two elements using flexbox: centering one and aligning the other to the right

Can a universal Save File As button be created for all web browsers?

Error encountered when attempting to access a dropdown menu on a website due to a NoSuchElementException

Improper layout on laptop screens with smaller dimensions

Creating a mesmerizing parallax effect for your image: A step-by-step guide

What is the best way to horizontally align and center the navigation menu?

Issue with Google Maps functionality within the jQuery easytabs platform

Drop-down menu options failing to appear within the drop-down menu

Decoding a Json list with angularJS

Using React components with Material UI to create styled div boxes