CSS skewX 和变换 anchor

Question

嗨，我很着急，我需要有人帮助我如何像这样设计我的 anchor 。我用 transform: skewX(-10deg); 设计了它的样式但是这第二个 anchor 不应该在右侧有任何“变换”或“旋转”。就像这张图片一样。

这是html标记

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

span 和 li 的 css 样式

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

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

Answer 1

我是怎么解决这个问题的

代码笔链接

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

HTML代码:

 <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 代码:

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