Нужно разбить ячейку таблицы мат по диагонали и добавить значения

Question

Мне нужно разделить ячейку таблицы матов по диагонали.и необходимо добавить значения и цвета в соответствии со значениями.Вот так ...

Теперь я разделил ячейку на четыре.и добавить значения и цвета ...

Это мой код .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;
}

Answer 1

Как показано в CSSDesk http://www.cssdesk.com/RERXd

CSS / HTML

    div.all { 
      margin:20px;
      width:200px;
      height:120px ;
      background-color:#ee0;
      position:relative;
      font-size:40px;
    }
    div.top {
      width: 0;
      height: 0;
      border-top: 120px solid #ffb;
      border-right: 200px solid transparent;
    }
    div.mid {
      position:absolute;
      top:0;
      left:0;
    }
    div.bot {
      position:absolute;
      bottom:0;
      right:0;
    }
    div.mid, div.bot { 
      padding:5px;
    }

    <table><tr><td>
    <div class="all">  
      <div class="top"></div>
      <div class="mid">-261</div>
      <div class="bot">22.1%</div>
    </div>
    </td></tr></table>

Answer 2

Попробуйте это:

    body {
        background-color: burlywood
    }

    .main {
        margin: 50px;
        overflow: hidden;
        position: relative;
        width: 100px;
        height: 50px;
        background-color: aqua;
    }

    .text {
        height: 25px;
    }

    .percentage {
        background-color: transparent;
        text-align: right;
        height: 25px;
        position: relative;
    }

    .percentage>div {
        position: relative;
        z-index: 1;
    }

    .percentage:before {
        content: "";
        background-color: white;
        position: absolute;
        height: 60px;
        width: 120px;
        top: 0;
        left: 0;
        transform: rotate(-27deg);
        z-index: 0;
    }

<div class="main">
    <div class="text">203</div>
    <div class="percentage">
        <div>
            95%
        </div>
    </div>
</div>

Вам необходимо настроить эти свойства CSS в соответствии с вашим кодом:

• width и height в .main
• width, height и transform в .percentage:before

Надеюсь, эта помощь