I use transforms to make mine <li>
below

here are my codes
.tab-nav {
width: 100%;
height: 40px;
margin-top: 100px;
}
.tab-nav-li {
display: inline-block;
border: solid 1px gray;
margin: 0 5px;
min-width: 170px;
min-height: 40px;
line-height: 40px;
text-align: center;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: perspective(38px) rotateX(2deg);
transform-origin: bottom;
}
<div class="tab-nav">
<ul>
<li class="tab-nav-li">
<span>The first tab</span>
</li>
<li class="tab-nav-li">
<span>The second tab</span>
</li>
<li class="tab-nav-li">
<span>The third tab</span>
</li>
</ul>
</div>
Run code Tagsli are transformed as my expectations, but its contents also transformed, and this creates blurry text (as you can see, this is not clear). Is there any way to avoid this?
Another issue considering this in the FF browser, the left border looks nonsmooth. Do you know why and how to solve this problem?

Regards, Ken
Updated May 9, 2017 - 17:19
I want to add a call to the "highlighted" class to fill in the background color for the li tag.
.tab-nav {
width: 100%;
height: 40px;
margin-top: 100px;
}
.tab-nav-li {
display: inline-block;
margin: 0 5px;
min-width: 170px;
min-height: 40px;
line-height: 40px;
perspective: 38px;
position: relative;
}
.tab-nav-li:before {
content: "";
width: 100%;
height: 40px;
position: absolute;
border: solid 1px gray;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: rotateX(2deg);
transform-origin: bottom;
}
span {
display: block;
text-align: center;
}
.highlighted {
background-color: darkgray;
}
<div class="tab-nav">
<ul>
<li class="tab-nav-li highlighted">
<span>The first tab</span>
</li>
<li class="tab-nav-li">
<span>The second tab</span>
</li>
<li class="tab-nav-li">
<span>The third tab</span>
</li>
</ul>
</div>
Run codeAs you can see the above result, the color was filled, but does not match the borders.
.tab-nav {
width: 100%;
height: 40px;
margin-top: 100px;
}
.tab-nav-li {
display: inline-block;
margin: 0 5px;
min-width: 170px;
min-height: 40px;
line-height: 40px;
perspective: 38px;
position: relative;
}
.tab-nav-li:before {
content: "";
width: 100%;
height: 40px;
position: absolute;
border: solid 1px gray;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
transform: rotateX(2deg);
transform-origin: bottom;
}
span {
display: block;
text-align: center;
}
.highlighted:before {
background-color: darkgray;
}
<div class="tab-nav">
<ul>
<li class="tab-nav-li highlighted">
<span>The first tab</span>
</li>
<li class="tab-nav-li">
<span>The second tab</span>
</li>
<li class="tab-nav-li">
<span>The third tab</span>
</li>
</ul>
</div>
Run codeAnd higher. the color has been filled and set within the borders, but it overlays the text.
Please help me solve this problem.
,
Ken