利用CSS3实现凸凹形状导航

Question

利用CSS3实现凸凹形状导航

3

有没有办法创建具有透明背景颜色的导航栏，就像下面的图片一样？

我尝试使用CSS3的伪类选择器，但曲线与设计不符：

div::before{
  width: 200px;
  height: 90px;
  background: rgba(255, 255, 255, 0.2);
  background: radial-gradient(circle 0 at -20% 50%,transparent,transparent 100px,rgba(255, 255, 255, 0.2) 100px),
   radial-gradient(circle 20px at 180px 50%,transparent,transparent 100px,rgba(255, 255, 255, 0.2) 100px);
  background-size:100px 90px, 100px 90px;
  background-position:0 0,100% 0;
  background-repeat:no-repeat
}

- Rakesh Vadnal

1

你目前尝试过什么了吗？ - Gaurav Aggarwal

post your html too - Atula

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Harry · Accepted Answer

使用CSS有多种方法可以实现此效果，以下回答中我演示了其中的几种。我使用了ul和li标签，因为我认为它们更适合作为导航栏，但你也可以很容易地将其转换为使用div标签。

这两种CSS方法的一个缺点是父元素仍然基本上是一个矩形，所以鼠标交互会发生在曲线之外（但在元素边界内）。我对这个问题唯一的解决方案是使用clip-path。

使用径向渐变：

这就像你开始做的那样。我只是把渐变设置在正确的位置，并用它来产生右侧的黑色边框。元素左侧的曲线是使用border-radius属性完成的。

径向渐变在20px处（元素高度的一半）是透明的，在1px处为黑色（产生边框），其余部分具有所需的背景颜色。

使用渐变的缺点是，它们在IE9及更低版本中不起作用，因为它们不支持渐变。

li {
  position: relative;
  float: left;
  width: 33%;
  height: 40px;
  line-height: 36px; /* height - 2 * border width */
  text-indent: 10px;
  border: 2px solid rgba(0, 0, 0, .5);
  border-right: none;
  border-radius: 20px 0px 0px 20px;
  background: radial-gradient(20px 20px at calc(100% + 4px) 50%, transparent 18px, rgba(0, 0, 0, .5) 19px, rgba(0, 0, 0, .5) 20px, rgba(255, 255, 255, .25) 21px); /* the first color after transparent is border color, the last color is background color */
  background-clip: content-box;
  box-shadow: -1px 2px 1px rgba(0, 0, 0, .25);
  overflow: hidden;
}
ul {
  list-style-type: none;
}
* {
  box-sizing: border-box;
}
body {
  background: radial-gradient(circle, chocolate 0%, sandybrown 100%);
  min-height: 100vh;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

使用盒子阴影：

这种方法具有更好的浏览器支持，因为box-shadow甚至在IE9中也适用。对于这种方法，我们需要一个伪元素，它被放置在父元素的右边框内部。两个元素（即伪元素和父元素）都被分配了border-radius来创建曲线。使用广泛的box-shadow在伪元素上实现背景颜色，因为将背景颜色分配给父元素或伪元素也会渗出形状外。

li {
  position: relative;
  float: left;
  width: 33%;
  height: 40px;
  line-height: 36px; /* height - 2 * border width */
  text-indent: 10px;
  border: 2px solid rgba(0, 0, 0, .5);
  border-right: none;
  border-radius: 20px 0px 0px 20px;
  box-shadow: -1px 2px 1px rgba(0, 0, 0, .25);
  overflow: hidden;
}
ul {
  list-style-type: none;
}
li:after {
  position: absolute;
  content: '';
  height: 100%;
  width: 100%;
  left: calc(100% - 18px); /* 100% - (half of height  - border width) */
  top: -2px; /* inverse of border width */
  border-radius: 20px;
  border: 2px solid rgba(0, 0, 0, .5);
  box-shadow: 0px 0px 0px 999px rgba(255, 255, 255, .25); /* the color here is the background color */
  z-index: -1;
}
*{
  box-sizing: border-box;
}
body {
  background: radial-gradient(circle, chocolate 0%, sandybrown 100%);
  min-height: 100vh;
}

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

使用SVG：

您可以通过使用SVG创建path元素并将其相对于父元素进行绝对定位来实现此操作。

li {
  position: relative;
  float: left;
  width: 33%;
  height: 40px;
  line-height: 40px;
  text-indent: 10px;
}
ul {
  list-style-type: none;
}
svg {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
path {
  stroke: rgba(0, 0, 0, .5); /* border color */
  stroke-width: 2; /* border width */
  fill: rgba(255, 255, 255, .25); /* background color */
}
path:hover{
  stroke: red;
}
body {
  background: radial-gradient(circle, chocolate 0%, sandybrown 100%);
  min-height: 100vh;
}

<ul>
  <li>
    <svg viewBox='0 0 200 40' preserveAspectRatio='none'>
      <path d='M20,1 A19,19 0 1,0 20,39 L200,39 A19,19 0 0,1 200,1z' />
    </svg>One</li>
  <li>
    <svg viewBox='0 0 200 40' preserveAspectRatio='none'>
      <path d='M20,1 A19,19 0 1,0 20,39 L200,39 A19,19 0 0,1 200,1z' />
    </svg>Two</li>
  <li>
    <svg viewBox='0 0 200 40' preserveAspectRatio='none'>
      <path d='M20,1 A19,19 0 1,0 20,39 L200,39 A19,19 0 0,1 200,1z' />
    </svg>Three</li>
</ul>