mishke mishke - 2 months ago 8
CSS Question

CSS skewX and transform anchors

Hi I am in hurry and I need someone to help how to style my anchors like this. I styled it with transform: skewX(-10deg); but this second anchord should not have any 'transform' or 'rotation' on the right side. Like on this image.

here is the html markup

<ul class="nav-elements">
<li class="log"><a><span>Prijavi se</span></a></li>
<li class="reg"><a><span>Registruj se</span></a></li>
</ul>


And css style for span and li

li.log, li.reg {
transform: skewX(-10deg);
}

span {
display: block;
transform: skewX(10deg);
}


Anchors

Answer

Here how I solved this issue

Codepen link

http://codepen.io/husain100b/pen/PGpQQO

HTML code:

 <ul class="nav-elements">
    <li class="log"><a href="#"><span>Prijavi se</span></a></li>
    <li class="reg"><a href="#"><span>Registuj se</span></a></li>
 </ul>

CSS code:

 li {
  display: inline-block;
}

li {
    transform: skewX(-10deg);
    position: relative;
}

li.reg:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: red;
      transform: skewX(10deg);
      left: 4px;
}
li a {
  text-decoration: none;
  display: block;
  padding: 8px;
  background-color: red;
  padding: 10px;
  z-index: 9999;
  position: relative;
}
Comments