CSS 变换不模糊的倾斜

Question

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

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

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> 是 window 宽度的 100% 并向左移动以消除由倾斜。 <aside> 现在是 width: 110%，它删除了结束间隙。

更新 2： 我对 width:110% 移除端部间隙一直不满意，所以我现在使用 transform-origin: bottom center; 使偏斜离开仅底部边缘（因此转换围绕底部边缘的中点进行），因此实际上不会产生末端间隙！最新代码中的文本也调整了一些边距。

Answer 2

转换导致模糊是否是浏览器和渲染器特定的伪影。

我发现 Firefox 通常比 Chrome 更能呈现转换后的文本而不模糊。您的示例在 Firefox（Linux，使用英特尔图形）中无需修改且不模糊。

在我的机器上，如果您从 .driver 中删除 -webkit-backface-visibility: hidden;，Chrome 也会渲染文本而不会变得模糊。

更好的通用解决方案通常是避免转换文本。而是在转换所有其他非文本内容后添加文本。

Answer 3

从您的 ::before ::after 类中移除属性“-webkit-backface-visibility: hidden;”。这样它就能完美运行。

对我有用。在 Chrome、Firefox 和 Edge

中

body{ margin: 0; }
.top { height: 100px; }
.main { 
background: linear-gradient(0deg, #FFFFFF 0%, #d1d1d1 100%);
position: relative;
color: #fff;  
z-index: 1;
color: #fff;
font-family: arial, sans-serif;
margin: 100px 0;
padding: 10% 10px;
text-align: center;}

.main:before{
  content:  '';
  background: #d1d1d1; 
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0; 
  z-index: -1;
 /* -webkit-backface-visibility: hidden;*/
  top: 0;
  transform: skewY(-5deg); 
  transform-origin: 1%;
}

.main:after{
  background: #d1d1d1;
  content:  '';
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0; 
  z-index: -1;
 /* -webkit-backface-visibility: hidden; */
  top: 0;
  transform: skewY(5deg); 
  transform-origin: 1%;
}

<div class="top"></div>
<div class="main">
  <h1>CONTENT</h1>
</div>

CSS 变换不模糊的倾斜

CSS transform skew without blur

css

fonts

css-transforms