<div class="chart-block" style="width: 265px; margin: 0px auto;">
<div class="grid-content">
<div class="funnelChart" style="position: relative; font-size: 16px; color: rgb(255, 255, 255);
font-weight: bold; height: 0px; text-align: center; width: 400px; margin-left: 0px;
border-top: 40px solid rgb(60, 110, 240); border-left: 20px solid transparent; border-right: 20px solid transparent;">
<span
style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">商业机会：20个</span>
</div>
</div>
<div class="grid-content">
<div class="funnelChart"
style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 360px; margin-left: 20px; border-top: 40px solid rgb(44, 166, 225); border-left: 20px solid transparent; border-right: 20px solid transparent;">
<span
style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">邀约量房：20个</span>
</div>
</div>
<div class="grid-content">
<div class="funnelChart"
style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 320px; margin-left: 40px; border-top: 40px solid rgb(38, 168, 114); border-left: 22px solid transparent; border-right: 22px solid transparent;">
<span
style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">设计：20个</span>
</div>
</div>
<div class="grid-content">
<div class="funnelChart"
style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 276px; margin-left: 62px; border-top: 40px solid rgb(255, 186, 18); border-left: 20px solid transparent; border-right: 20px solid transparent;">
<span
style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">报价：20个</span>
</div>
</div>
<div class="grid-content">
<div class="funnelChart"
style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 235px; margin-left: 83px; border-top: 40px solid rgb(255, 110, 76); border-left: 20px solid transparent; border-right: 20px solid transparent;">
<span
style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">邀客户到店：20个</span>
</div>
</div>
<div class="grid-content">
<div class="funnelChart"
style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 195px; margin-left: 103px; border-top: 40px solid rgb(225, 37, 27); border-left: 18px solid transparent; border-right: 18px solid transparent;">
<span
style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">签约或交定金：20个</span>
</div>
</div>
<div class="grid-content">
<div class="funnelChart"
style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 86px; margin-left: 121px; border-top: 153px solid rgb(154, 145, 235); border-left: 80px solid transparent; border-right: 80px solid transparent;">
<span
style="top: -136px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">挂单：20个</span>
</div>
</div>
</div>
实现原理通过：borderTop定宽 + borderLeft/borderRight控制其形状（梯形或者三角形） ，然后用marginLeft调整他的位置从而组装成漏斗图。
可调节vue代码demo：
<template>
<div class="chart-block" style="width: 265px;margin: 0 auto;">
修改的梯形索引: <a-input v-model:value="index" placeholder="修改的梯形索引"/>
宽度: <a-input-number v-model:value="customerOverview[index].funnleWidth" placeholder="左右角度" /><br />
左右角度: <a-input-number v-model:value="customerOverview[index].nextWidth" placeholder="左右角度" /><br />
左右间距: <a-input-number v-model:value="customerOverview[index].left" placeholder="左右间距" /><br />
梯形高度: <a-input-number v-model:value="customerOverview[index].top" placeholder="梯形高度" /><br />
<a-button type="primary" @click="download()">打印</a-button>
<div class="grid-content" v-for="(item , cuIndex) in customerOverview" :key="cuIndex">
<div class="funnelChart" style="position: relative;font-size: 16px;color: #fff;font-weight: bold;height: 0; text-align: center;"
:style="{width:item.funnleWidth+'px', marginLeft: item.left +'px',
borderTop: item.top + 'px solid '+funnleColor[cuIndex],
borderLeft:item.nextWidth+'px solid transparent',
borderRight: item.nextWidth+'px solid transparent'}">
<span :style="{top: cuIndex === 6 ? '-136px' : '-28px'}" style="position: absolute;left: 50%;transform: translateX(-50%);white-space: nowrap;">{{ item.text }}</span>
</div>
</div>
</div>
</template>
<script lang="ts">
import {Vue, Component} from 'vue-facing-decorator';
@Component({})
export default class chart extends Vue {
// 修改的索引
index = 0;
funnleColor = ['#3C6EF0', '#2CA6E1', '#26A872', '#FFBA12', '#FF6E4C', '#E1251B', '#9a91eb'];
customerOverview =[
{funnleWidth: 400, nextWidth: 20, left: 0, top: 40, text: '商业机会：20个'},
{funnleWidth: 360, nextWidth: 20, left: 20, top: 40, text: '邀约量房：20个'},
{funnleWidth: 320, nextWidth: 22, left: 40, top: 40, text: '设计：20个'},
{funnleWidth: 276, nextWidth: 20, left: 62, top: 40, text: '报价：20个'},
{funnleWidth: 235, nextWidth: 20, left: 83, top: 40, text: '邀客户到店：20个'},
{funnleWidth: 195, nextWidth: 18, left: 103, top: 40, text: '签约或交定金：20个'},
{funnleWidth: 86, nextWidth: 80, left: 121, top: 153, text: '挂单：20个'},
];
download() {
console.log('customerOverview', this.customerOverview)
}
}
</script>
<style scoped lang="less">
</style>