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

Having difficulty grasping the concept behind the prepend method's functionality

Executing a function should be delayed until all necessary information is obtained from the REST Api

Ensuring proper functionality of JQModal when displayed above an iframe with the usage of ?wmode=

Unable to display imported image in React application

adjusting the color of ion-button when hovering over the cancel button

Adding several lines of HTML content from an object using jQuery's append method

Achieving consistent sizing for React-Bootstrap cards: A guide

"Modifying the height of an SVG <g> element: A step-by

Display a pop-up window when hovering over a table cell using HTML and JavaScript

Setting a CSS grid column to have a minimum width of `max-content` and a specific

Swap the Text for a Button

Is there a way for me to adjust the font size across the entire page?

Trigger an instantaneous update of the masonry grid

Demonstrating the transformation of child elements into parent elements through angular 6 ngFor

Is there a way to use a specific keyboard input to alter the characteristics of shapes on my webpage?

"Exploring the Power of Angular with HTML Checkboxes

Navigating through cpanel to interact with a Button using Selenium in Python

Zurb Foundation gem causing navigation errors

Embeddable video player failing to adjust size properly within parent div

Firefox is not rendering HTML5 elements properly