没有模糊的CSS变换倾斜

Question

我正在尝试创建一些带有边框和文本的驱动程序。驱动程序需要倾斜，所以我应用了 transform: skew(); CSS 规则。但是，现在字体和边框变得非常模糊。我知道可以向元素添加字体平滑，但我不确定如何也平滑我的边框？

我希望这些驱动程序是浏览器的全宽，倾斜后没有空白。

CSS -

.flex-inline{
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
}
.driver-wrap{
   overflow: hidden;
   margin-bottom: 75px;
}   
.driver{
  flex: 1;
  background-color: #fff;
  min-height: 250px;
  position: relative;
  transform: skew(-15deg, 0deg);
  -webkit-backface-visibility: hidden;
  overflow: hidden;
  cursor: pointer;
}      
.content{
  background-image: url('https://i.imgur.com/oKWAofK.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0;
  left: -50px;
  right: -50px;
  bottom: 0;
  transform: skew(15deg, 0deg);
}         
.text{
  position: absolute;
  bottom: 10px;
  left: 75px;
  width: 70%;
  transform: rotate(360deg);
}
h2{
  font-family: $heading;
  font-size: 28px;
  color: #fff;
  margin: 0px 0px;
  text-transform: capitalize;
}
p{
  color: #fff;
  font-size: 18px;
  margin-top: 5px;
}

.driver:nth-child(1){
  margin-left: -50px;
  border-right: 20px solid #fdcb6e;

}
.driver:nth-child(2){
  border-right: 20px solid #e84393;
}

HTML -

<div class="driver-wrap flex-inline">
    <div class="driver">
        <div class="content">
       <div class="text">
               <h2>Building training</h2>
          <p>lorem ipsum text here</p>
       </div>
        </div>
    </div>
    <div class="driver">
        <div class="content">
       <div class="text">
               <h2>Building training</h2>
          <p>lorem ipsum text here</p>
       </div>
        </div>
    </div>
    <div class="driver">
        <div class="content">
       <div class="text">
               <h2>Building training</h2>
          <p>lorem ipsum text here</p>
       </div>
        </div>
    </div>
</div>

JSFiddle - https://jsfiddle.net/zhhpm02y/10/

Answer 1

我还没有看到任何纯 CSS 解决方案来修复转换后的模糊文本 - 但我很高兴被证明是错误的!

我发现最好永远不要倾斜或转换文本，而是倾斜图像、边框等，然后将文本放在顶部。例如:

body {
  margin: 0;
}

nav {
  display: flex;
  margin-left: -54px;
  overflow: hidden;
}

article {
  position: relative;
  width: 100%;
}

section {
  min-width: 300px;
  margin-top: 130px;
  margin-left: 70px;
}

aside {
  background-image: url('https://i.redd.it/kvowi2zio7h01.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  top: 0;
  left: 0;
  transform: skew(-15deg, 0deg);
  transform-origin: bottom center;
  z-index: -1;
  width: 100%;
  height: 200px;
}

aside::after {
  content: "";
  height: 100%;
  position: absolute;
  border-right: 20px solid #fdcb6e;
}

article:nth-child(2n) aside::after {
  border-right-color: #e84393;
}

h2 {
  font-family: Verdana;
  font-size: 25px;
  color: #fff;
  margin: 0;
}

p {
  color: #fff;
  font-size: 18px;
  margin-top: 5px;
}

<nav>
  <article>
    <section>
      <h2>Building training</h2>
      <p>lorem ipsum text here</p>
    </section>
    <aside></aside>
  </article>
  <article>
    <section>
      <h2>Building training</h2>
      <p>lorem ipsum text here</p>
    </section>
    <aside></aside>
  </article>
  <article>
    <section>
      <h2>Building training</h2>
      <p>lorem ipsum text here</p>
    </section>
    <aside></aside>
  </article>
</nav>

更新:根据下面的一些评论，<nav>是窗口宽度的 100% 并向左移动以消除倾斜产生的初始间隙。 <aside>现在是width: 110%这消除了末端间隙。

更新 2: 我对 width:110% 从来都不满意删除末端间隙，所以我现在使用了 transform-origin: bottom center;使倾斜单独离开底部边缘(因此转换围绕底部边缘的中点进行)，从而实际上不会产生末端间隙!最新代码中的文本也调整了一些边距。