html - マット テーブル セルを斜めに分割し、値を追加する必要がある

Question

Mat Table セルを斜めに分割する必要があります。値に応じて値と色を追加する必要があります。このような...

ここで、セルを 4 つに分割します。値と色を追加します...

これは私のコードです.html

<ng-container matColumnDef="RearIdler">
            <mat-header-cell class="eval-header" *matHeaderCellDef> {{Translate('Rear Idler')}} </mat-header-cell>
            <mat-cell *matCellDef="let row" class="no-padding">
                <div>
                    <span class="component-span top {{getComponentHoursClass(7,1, row.Components)}}">
                        {{getComponentHours(7,1, row.Components)}}
                    </span>
                    <span class="component-span top {{getComponentClass(7,1, row.Components)}}">
                        {{getComponentValue(7,1, row.Components)}}%
                    </span>
                </div>
                <div>
                    <span class="component-span bottom {{getComponentHoursClass(7,2, row.Components)}}">
                        {{getComponentHours(7,2, row.Components)}}
                    </span>
                    <span class="component-span bottom {{getComponentClass(7,2, row.Components)}}">
                        {{getComponentValue(7,2, row.Components)}}%
                    </span>
                </div>
            </mat-cell>
        </ng-container>

.css

.component-span {
    display:block;
    border-radius: 4px;
    text-align: center;
    margin: 1px;
    padding: 4px 2px;
    font-size: 12px;
}