How to make a funnel responsive table?

Question

I’m trying to do similar to this image:

Here’s a Fiddle as far as I can go

The data will be dynamic, and I need the corners to be rounded.

I accept other alternatives or suggestions for mounting this table.

Answer 1

As you made the divisions using edges I could not think of another solution that was not using pseudo-elements and a radial-gradient...

Follow the example, I left one in the color red with transparency for you to see the alignment and as the radial-gradiente was built, and the bottom I left the way it should be. I had to leave a track of "Blur" in the gradient 50% 52% for the rendering to be a little better and not get a "serrated" in the circle.

Look at the result. I left the right side for you to do ;) it may be that you have to make a fine fit on top, bottom, left, right to be perfect in your taste...

.funnel_outer {
    width:100%;
    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:1px 0;
    height: 80px;
    clear: both;
    text-align: center;
    width:100%;
    list-style:none
}
.funnel_outer li span{
    border-top-width: 80px;
    border-top-style:  solid;
    border-left: 25px solid transparent;
    border-right:25px solid transparent;
    height: 0;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
.funnel_step_1 span{
    width:100%;
    border-top-color: #98c938;
}
.funnel_step_1 span::after{
    content: "";
    position: absolute;
    top: -86px;
    left: -26px;
    height: 20px;
    width: 20px;
    background-image: radial-gradient(circle at bottom right, red 49%, rgba(255,0,0,0.5) 51%);
}
.funnel_step_2 span{
    width:calc(100% - 50px);
    border-top-color: #729f3b
}
.funnel_step_3 span{
    width:calc(100% - 100px);
    border-top-color: #4b743f
}
.funnel_step_4 span{
    width:calc(100% - 150px);
    border-top-color: #264b44
}
.funnel_step_4 span::after{
    content: "";
    position: absolute;
    bottom: -5px;
    left: -10px;
    height: 20px;
    width: 20px;
    background-image: radial-gradient(circle at top right, #264b44 50%, #fff 52%);
}

.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: -70px;
    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>
    </ul>
</div>