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;使偏斜离开底边（所以转换是在底部边缘的中间点附近），从而实际上从未形成结束间隙！在最新的代码中也对文本进行了一些调整。

Answer 2

变换是否导致模糊是浏览器和渲染器特定的工件。

我发现Firefox通常能够在转换后呈现文本而不会比Chrome更好地模糊。您的示例无需修改即可在Firefox中使用（Linux，使用Intel图形）。

在我的计算机中，如果您从-webkit-backface-visibility: hidden;移除.driver，则Chrome也会在不模糊的情况下呈现文字。

更好的通用解决方案通常是避免转换文本。而是在改变了其他不是文本的内容之后添加文本。

Answer 3

从:: before :: after类中删除属性“ -webkit-backface-visibility：隐藏； ”。这样它才能完美运行。

对我有用。在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变换倾斜而没有模糊

3 个答案: