使用变换偏斜后如何填充剩余的空间

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>