CSS skewX和变换锚点

Question

嗨，我很着急，我需要有人来帮助如何设置这样的锚点。我使用transform设置它：skewX（-10deg）;但是这第二个锚点不应该在右侧有任何“变换”或“旋转”。就像在这张图片上一样。

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

这是我如何解决这个问题的

Codepen链接

file a bug

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

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