在css的倒半圈侧面的按钮

Question

我正在尝试创建一个可堆叠的自举按钮，两侧有倒圆圈。

尝试使用盒子阴影和径向渐变但却无法理解......

我还想保持引导程序的样式 - 在我的情况下，这些按钮是导航按钮。

最终结果应与此类似：

Answer 1

类似的东西：

button {
  border: 1px solid black;
  border-radius: 9999em 0 0 9999em;
  position: relative;
  margin-left: -1em;
  padding-right: 1em;
}

button:first-child {
  margin-left: 0;
}

<button>button 1</button>
<button>button 2</button>
<button>button 3</button>
<button>button 4</button>
<button>button 5</button>

Answer 2

您可以使用此CSS：

执行此操作

.buttonCool{
  border-radius: 10px 0px 0px 10px;
  border: 2px solid;
}

.shadow{
  margin-left: -12px;
}

使用此HTML：

<button class="buttonCool" type="button">Click Me!</button>
<button class="buttonCool shadow" type="button">Click Me!</button>
<button class="buttonCool shadow" type="button">Click Me!</button>
<button class="buttonCool shadow" type="button">Click Me!</button>

JSFiddle