Как заполнить пробел, оставшийся после использования перекоса преобразования

Question

Мне нужно заполнить пространство справа от третьего поля, и текст в середине должен быть нормальным, а не преобразованием.Как я могу сделать это с помощью CSS?

.progressbar_item {
    padding: 0;
    list-style: none;
    border: 2px solid #0A5875;
    border-radius: 90px;
    display: flex;
    height: 50px;
}

.progressbar_item li {
    border-right: 2px solid #0A5875;
    width: 33.33333333%;
    display: flex;
    color: #0A5875;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.progressbar_item li:nth-child(2){
    transform: skew(-20deg);
    border-left: 2px solid;
    background: #fff;
    margin-left: -10px;
    margin-right: -10px;  
}
.progressbar_item li:first-child { border-radius: 50px 0 0 50px; } 
.progressbar_item li.active { background: #F05D21; } 
.progressbar_item li:hover {background: #F05D21; }
.progressbar_item li:last-child { border-right: 0; border-radius: 0 50px 50px 0; }

<ul class="progressbar_item">
    <li class="active">YEAR 3</li>
    <li>YEAR 6</li>
    <li>YEAR 9</li>
</ul>

Answer 1

Чтобы заполнить пространство справа, вы можете установить ширину тегов li равной 100%.При использовании flex вам не нужно возиться с 33%, он сделает все за вас.

Чтобы удалить эффект перекоса из текста, вы должны сначала создать вложенный элемент внутри элемента.вы изменили наклон, затем примените противоположный наклон к этому вложенному элементу.

Код, который я изменил:

HTML:

<li><span>YEAR 6</span></li>

CSS:

.progressbar_item li{
  width: 100%
}

.progressbar_item li:nth-child(2) span {
  transform: skew(20deg);
}

.progressbar_item {
    padding: 0;
    list-style: none;
    border: 2px solid #0A5875;
    border-radius: 90px;
    display: flex;
    height: 50px;
}

.progressbar_item li {
    border-right: 2px solid #0A5875;
    width: 100%;
    display: flex;
    color: #0A5875;
    font-weight: bold;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.progressbar_item li:nth-child(2) {
    transform: skew(-20deg);
    border-left: 2px solid;
    background: #fff;
    margin-left: -10px;
    margin-right: -10px;
}
.progressbar_item li:nth-child(2) span {
    transform: skew(20deg);
}

.progressbar_item li:first-child {
    border-radius: 50px 0 0 50px;
}

.progressbar_item li.active {
    background: #F05D21;
}

.progressbar_item li:hover {
    background: #F05D21;
}

.progressbar_item li:last-child {
    border-right: 0;
    border-radius: 0 50px 50px 0;
}

<ul class="progressbar_item">
    <li class="active"><span>YEAR 3</span></li>
    <li><span>YEAR 6</span></li>
    <li><span>YEAR 9</span></li>
</ul>