Rotate border on nav-CodePudding

I'm working on a project from PSD to HTML i am only stuck with this.

The people asking for the project wants me to make a top header with rotated lines. I tried using transform in the list items but nothing seems to work. I also tried to look it up but found nothing to the solution of my problem. This is how it has to be done.

I have my CSS like this:

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 60px;
    float: right;
    background-color: #F3F3F3;
}
li {
    background-color: aqua;
    transform: rotate(-11deg);
    display: inline;
    padding: 40px;
}

<ul>
<li>1</li>
<li>2</li>
</ul>

Is it that maybe i should use it as an image instead trying to transform it myself?

CodePudding user response：

.content ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 500px;
    height: 60px;
    float: right;
    background-color: #F3F3F3;
}

.content li {
    display: inline-block;
    padding: 0 40px;
      height: 60px;
      line-height: 60px;
      position: relative;
      z-index:2;
      background-color:aqua;
      transform: skew(-20deg,0deg);
}

.content li a {
      display: inline-block;
      transform: skew(20deg,0deg);
}

<div class="content">
    <ul>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
    </ul>
</div>

CodePudding user response：

you can also use clip-path

there is a generator you can use for visualization:

.content ul {
    list-style-type: none;
    display:flex;
}

.content li {
    display: block;
    padding: 0 40px;
    line-height: 60px;
    z-index:2;
    background-color:aqua;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    -webkit-clip-path:polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}

<div class="content">
    <ul>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
        <li><a href="">menu</a></li>
    </ul>
</div>

i used negative margin-left:-30px to glue them together but im not sure if that is the best practice