具有圆角和内角的CSS MENU

Question

我想创建一个具有多个圆角的导航菜单，如下图所示，
而且我也希望它仅适用于CSS，而不适用于图像。

Answer 1

您可以在伪元素上使用transform:skewX()实现所需的功能

 html { background: #222; } body { margin: 0; padding: 0; } .nav { position: absolute; top: 0; lefT: 0; height: 50px; width: 100%; background: lightgray; } .navlogo { height: 50px; width: 100px; background: inherit; position: absolute; top: 100%; left: 100px; border-radius: 0 0 5px 10px; text-align:center; line-height:50px; } .navlogo:before { content: ""; position: absolute; top: 0; right: 100%; height: 20px; width: 20px; border-radius: 50%; box-shadow: 15px -15px 0 5px lightgray; z-index:-1; } .navlogo:after { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: inherit; border-radius: 0 0 5px 5px; transform: skewX(-45deg); transform-origin: bottom left; } 

 <div class="nav"> <div class="navlogo">LOGO</div> </div> 

---

对于您的最后一部分（使最右边的部分弯曲），我想我可能不得不使用第二个元素：

 html { background: #222; } body { margin: 0; padding: 0; } .nav { position: absolute; top: 0; lefT: 0; height: 50px; width: 100%; background: lightgray; } .navlogo { height: 50px; width: 100px; background: inherit; position: absolute; top: 100%; left: 100px; border-radius: 0 0 5px 10px; text-align: center; line-height: 50px; } .navlogo:before { content: ""; position: absolute; top: 0; right: 100%; height: 20px; width: 20px; border-radius: 50%; box-shadow: 15px -15px 0 5px lightgray; z-index: -1; } .navlogo:after { content: ""; position: absolute; top: 0; right: 0; width: 50%; height: 100%; background: inherit; border-radius: 0 0 5px 5px; transform: skewX(-30deg); transform-origin: bottom left; z-index: -1; } .navlogo span { position: absolute; top: 0; left: calc(130% - 8px); height: 30px; width: 30px; border-radius: 50%; box-shadow: -15px -25px 0 5px lightgray; 

 <div class="nav"> <div class="navlogo">LOGO <span></span> </div> </div> 

Answer 2

您可以为每个标签尝试svg。 您需要添加pointer-events: none; 用于消除text元素的悬停干扰。

 body { margin: 0; background: #EEE; } text { font-family: sans-serif; font-weight: 700; fill: gold; stroke: #111; stroke-width: 0.8; pointer-events: none; } #tab1 { transition: 0.6s ease; } #tab1:hover { fill: crimson; transition: 0.6s ease; } 

 <svg viewBox="5 5 105 26" height="70px"> <path id="tab1" d="M 5 5 a 5 5 0 0 1 5 5 v 15 a 5 5 0 0 0 5 5 h 60 q 5 0 10 -5 l 15 -15 q 5 -5 10 -5" fill="#f75d59" stroke-width="0.8" stroke="black" /> <text x="20" y="22">LOGO</text> </svg>