Specific rounded navigation - html

Question

How to make properly such navigation bar, especially this two intersecting lines. I know that I can use transform: skewX(10deg); for rotating this vertical line, but not sure am I ok with whole html&css
HTML:
<main>
<div class="rounded-rectangle">
<ul class="top">
<li>
<button>text</button>
</li>
<li>
<button>text</button>
</li>
</ul>
<ul class="bottom">
<li>
<button>text</button>
</li>
<li>
<button>text</button>
</li>
</ul>
</div>
</main>
Fiddle

Answer 1

You could use pseudo elements of the container to draw the intersecting lines.
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: row;
font-family: 'Raleway', sans-serif;
background-color: #e24d3d;
}
main {
flex-grow: 1;
}
ul li {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
list-style: none;
text-transform: uppercase;
font-size: 30px;
}
button {
background-color: transparent;
border: none;
color: white;
padding: 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 2.5em;
font-family: 'Raleway', sans-serif;
text-transform: uppercase;
}
button:focus {
outline: -webkit-focus-ring-color auto 0px;
}
ul.top {
display: flex;
justify-content: space-around;
height: 50%;
}
ul.top div:nth-last-child(1) {
border-right: 1px solid #FFF;
}
ul.bottom {
display: flex;
justify-content: space-around;
height: 50%;
}
.rounded-rectangle {
background-color: rgba(128, 213, 226, 0.4);
height: 320px;
max-width: 520px;
border-radius: 10px;
margin: auto;
position: relative;
}
.rounded-rectangle:before, .rounded-rectangle:after {
content: '';
position: absolute;
background: #fff;
}
.rounded-rectangle:before {
top: 50%;
height: 1px;
left: 0; right: 0;
}
.rounded-rectangle:after {
left: 50%;
width: 1px;
top: 0; bottom: 0;
transform: rotate(10deg);
}
ul {
padding: 0;
margin: 0;
}
<main>
<div class="rounded-rectangle">
<ul class="top">
<li>
<button>text</button>
</li>
<li>
<button>text</button>
</li>
</ul>
<ul class="bottom">
<li>
<button>text</button>
</li>
<li>
<button>text</button>
</li>
</ul>
</div>
</main>