首页 > 编程入门 文章详情

CSS变换不歪斜(CSS transform skew without blur)

编程入门 行业动态 更新时间:2024-10-15 18:25:44
CSS变换不歪斜(CSS transform skew without blur)

我试图用边框和文本创建一些驱动程序。 驱动程序需要倾斜，所以我应用了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/

I'm trying to create some drivers with a border and text. The drivers need to be tilted so I have applied the transform: skew(); CSS rule. However, now the font and the border have gone really blurry. I understand it is possible to add font smoothing to an element but I'm not sure how to smooth my border as well?

I would like these drivers to be full width of the browser, with no white space after the skew.

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/

最满意答案

我还没有看到任何纯粹的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; 使偏斜离开底部边缘（所以变换位于底部边缘的中间点附近），从而永远不会产生最终间隙！ 最新代码中的文本也调整了一些保证金。 
I have yet to see any pure CSS solution to fix blurry text after a transform - but I'm happy to be proven wrong!
 

I've found it best to never skew or transform text and instead skew the image, border etc., then just position the text over the top. For example:
 

 
 
  
  
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> 
  
 

 

Update: Following some comments below, the <nav> is 100% of the window width and shifted left to remove the initial gap created by the skew. The <aside> is now width: 110% which removes the end gap.
 

Update 2: I was never happy with the width:110% to remove the end gap so I've now used transform-origin: bottom center; to make the skew leave the bottom edge alone (so the transformation is around the middle point on the bottom edge), thereby never actually creating an end gap! A few margins were adjusted for the text in the latest code too.

更多推荐

本文发布于:2023-08-05 20:02:00，感谢您对本站的认可！
本文链接:https://www.elefans.com/category/jswz/34/1437660.html
版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文标签：歪斜   CSS   transform   blur   skew

发布评论

评论列表 （有 0 条评论）

最近发表

草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍！

热门文章

标签列表