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

【问题标题】：How to fill a space that remains after using transform skew如何填充使用变换倾斜后剩余的空间
【发布时间】：2018-12-04 20:56:53
【问题描述】：

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

【问题讨论】：

标签： html css transform

【解决方案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>

【讨论】：

右边第三个框创建的空间怎么样。只有将鼠标悬停在它上面时才能看到它。
@Santosh 哎呀！忘了更新那条线。现在应该一切都好。