带有圆角和内角的CSS菜单

Question

我想创建一个导航菜单，其中有多个圆角，如下图所示 我也希望它只与CSS有关，而不是图像。

Answer 1

你可以在伪元素上使用transform:skewX()来实现你想要的东西

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>