html - 如何填充使用变换倾斜后剩余的空间

Question

我需要把第三个框右边的空间填满，中间的文字需要是normal而不是transform。我如何使用 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>