特定的圓形導航

Question

如何正確製作這樣的導航欄，特別是這兩條相交的線。我知道，我可以使用transform: skewX(10deg);旋轉這個垂直線，但不知道我是OK與整個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

您可以使用容器的僞元素來繪製相交的lin ES。

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>