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;使偏斜单独留下底边(因此变换位于底边的中间点附近),从而从未实际创建结束间隙!在最新的代码中也为文本调整了一些余量.