带圆角和内角的 CSS MENU答案

【问题标题】：CSS MENU with rounded corners and inner corners带圆角和内角的 CSS MENU
【发布时间】：2015-05-28 21:22:49
【问题描述】：

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

【问题讨论】：

i.imgur.com/ujus5Ta.png
你可以用border-radius :15px 来圆边框； px 是边框的圆度
如何从右下圆角向右上角内圆角倾斜？
你有没有试过，有很多文章。最好问问你所面临的问题。
我已经尝试了很多东西并在网上搜索（也在堆栈交换上）我可以找到内角，我可以找到圆角，但正如你在右侧看到的那样，你有圆角内角和倾斜那是困难的。

【解决方案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>

【讨论】：

【解决方案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>

【讨论】：