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 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; 
}