CSS transform skew without blur

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.

Tags:

Css

Fonts

Css Transforms

Recent Posts