Slanted Headings: How to Skew Elements

Home/Slanted Headings: How to Skew Elements

While I wait for some time to free up so I can completely revamp this old effort of a website, I thought it was about time to share another great little CSS3 snippet that will really help with some design ideas.

Slanted Header Elements

Slanted text or slanted elements in web design seems to be appearing more and more of late, and it’s very easy to achieve what you see above. Note: The code below will give you a perfect slant – there is a cut off point in my own header slant due to an attribute inherited (I wonder if any of you can guess which one?).

The CSS and HTML below should set you on the right path. It’s essentially a slanted DIV with a negative 20 degree slant, with the H1 tag contained slanted 20 degrees the other way to ensure it’s straight, as it should be (naturally the H1 inherits the slant by default so you need to skew it the opposite way).

HTML

<div style="slanted"><h1>Slanted Header Elements</h1></div>

CSS

DIV.slanted {
   display:block;
   background-color:#000 !important;
   border-right:6px solid #ff0000;

  -webkit-transform: skew(-20deg);
  -moz-transform: skew(-20deg);
  -ms-transform: skew(-20deg);
  -o-transform: skew(-20deg);
  transform: skew(-20deg); 

  -webkit-transition: background 0.2s;
  -moz-transition: background 0.2s;
  -ms-transition: background 0.2s;
  -o-transition: background 0.2s;
  transition: background 0.2s;
}

DIV.slanted h1  {
  text-align:center;
  text-decoration:none;
  padding:15px;
  color:#fff !important;

  -webkit-transform: skew(20deg) !important;
  -moz-transform: skew(20deg) !important;
  -ms-transform: skew(20deg) !important;
  -o-transform: skew(20deg) !important;
  transform: skew(20deg) !important; 
}
2015-05-30T16:45:58+00:00 November 15th, 2014|CSS Tricks|0 Comments

About the Author:

Warren Chandler is a freelance web programmer and web developer, based in Frinton on Sea, Essex. Warren specialises in web programming, web design, corporate identity, copy writing, SEO, logo and print media for home, work, and mobile platforms.

Leave A Comment