How to make a responsive tapered table?

Question

How to make a responsive tapered table?

Navigation

#1 by (1 votes)

0

I'm trying to do similar to this image:

Here a Fiddle as far as I could go

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

I accept other alternatives or suggestions for mounting this table.

css css3 canvas chart

asked by anonymous 17.12.2018 / 15:59

1 answer

Help with Query in Linq C # Use of the library in different S.

score 1 · Accepted Answer

As you did the divisions using borders I could not think of any solution other than using pseudo-elements and a radial-gradient ...

Follow the example, left a red color with transparency so you can see the alignment and how radial-gradiente was built , and the bottom one I left it the way it should be. I needed to leave a "blur" strip in the 50% 52% gradient for the rendering to get a little better and not get a "serrated" in the circle.

Seetheresult.Ilefttherightsideforyoutodo;)youmayhavetofine-tunethetop,bottom,left,righttobeperfectinyourtaste...

.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>