Trapezoid Funnel

Copy and paste the following shortcode into your post or page.

<?php
echo 'Hello, world!';

<style>
			.tf_1{max-width:600px;margin:0 auto;padding:18px 12px;box-sizing:border-box;font-family:inherit;}
			.tf_1 .tf-title{font-size:21px;text-align:center;color:#333333;margin:0 0 16px;letter-spacing:.2px;}
			.tf_1 svg{display:block;width:100%;height:auto;overflow:visible;}
			.tf_1 .tf-seg{transition:transform .18s ease, filter .18s ease;transform-box:fill-box;transform-origin:center;cursor:default;}
			.tf_1 .tf-seg:hover{filter:brightness(1.05);transform:scale(1.015);}
			.tf_1 .tf-lab{font-size:12px;}
			.tf_1 .tf-val{font-size:12.5px;font-weight:500;opacity:.92;}
			</style><div class="tf_1"><div class="tf-title">Sales Funnel</div><svg viewBox="0 0 660 452" preserveAspectRatio="xMidYMid meet"><defs><filter id="tf_1_sh" x="-20%" y="-20%" width="140%" height="140%"><feDropShadow dx="0" dy="3" stdDeviation="4" flood-color="#000" flood-opacity="0.16"/></filter><linearGradient id="tf_1_g0" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#296fff"/><stop offset="100%" stop-color="#2159d4"/></linearGradient><linearGradient id="tf_1_g1" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#8b41ff"/><stop offset="100%" stop-color="#7034d5"/></linearGradient><linearGradient id="tf_1_g2" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#f52c85"/><stop offset="100%" stop-color="#c5236b"/></linearGradient><linearGradient id="tf_1_g3" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#ff630d"/><stop offset="100%" stop-color="#d34f0b"/></linearGradient><linearGradient id="tf_1_g4" x1="0" y1="0" x2="0" y2="1"><stop offset="0%" stop-color="#19b753"/><stop offset="100%" stop-color="#149343"/></linearGradient></defs><g class="tf-seg"><title style="color:#d2d2d2">Visitors: 4,000</title><polygon points="19.8,6 640.2,6 640.2,94 19.8,94" fill="url(#tf_1_g0)" filter="url(#tf_1_sh)"/><text class="tf-lab" x="330" y="49" text-anchor="middle" fill="#d2d2d2">Visitors</text><text class="tf-val" x="330" y="66" text-anchor="middle" fill="#d2d2d2">4,000</text></g><g class="tf-seg"><title style="color:#d2d2d2">Leads: 2,500</title><polygon points="19.8,94 640.2,94 523.88,182 136.13,182" fill="url(#tf_1_g1)" filter="url(#tf_1_sh)"/><text class="tf-lab" x="330" y="137" text-anchor="middle" fill="#d2d2d2">Leads</text><text class="tf-val" x="330" y="154" text-anchor="middle" fill="#d2d2d2">2,500</text></g><g class="tf-seg"><title style="color:#d2d2d2">Qualified: 1,000</title><polygon points="136.13,182 523.88,182 407.55,270 252.45,270" fill="url(#tf_1_g2)" filter="url(#tf_1_sh)"/><text class="tf-lab" x="330" y="225" text-anchor="middle" fill="#d2d2d2">Qualified</text><text class="tf-val" x="330" y="242" text-anchor="middle" fill="#d2d2d2">1,000</text></g><g class="tf-seg"><title style="color:#d2d2d2">Customers: 250</title><polygon points="252.45,270 407.55,270 361.02,358 298.98,358" fill="url(#tf_1_g3)" filter="url(#tf_1_sh)"/><text class="tf-lab" x="330" y="313" text-anchor="middle" fill="#d2d2d2">Customers</text><text class="tf-val" x="330" y="330" text-anchor="middle" fill="#d2d2d2">250</text></g><g class="tf-seg"><title style="color:#d2d2d2">Repeat Buyers: 75</title><polygon points="298.98,358 361.02,358 331,446 329,446" fill="url(#tf_1_g4)" filter="url(#tf_1_sh)"/><text class="tf-lab" x="330" y="401" text-anchor="middle" fill="#d2d2d2">Repeat Buyers</text><text class="tf-val" x="330" y="418" text-anchor="middle" fill="#d2d2d2">75</text></g></svg></div>

[skillwrapper type="skt_trapezoidfunnel" chart_title="Sales Funnel" title_color="#333333" text_color="#d2d2d2"]

[skill label="Visitors" value="4000" color="#2563eb"]

[skill label="Leads" value="2500" color="#7c3aed"]

[skill label="Qualified" value="1000" color="#db2777"]

[skill label="Customers" value="250" color="#ea580c"]

[skill label="Repeat Buyers" value="75" color="#16a34a"]

[/skillwrapper]

Sales Funnel