引导选项卡的自定义样式

Question

我正在尝试更改默认引导程序选项卡样式。所以我的自定义样式应该类似于这个图像的样式。

我试过这样，但它没有用。主要的事情并不是扭曲每个标签的底部。

.content .nav-tabs {
  background: #dd5b5b;
  padding: 15px 0 0 0;
}
.content .nav-tabs > li > a {
  padding: 5px 40px;
  background: #eaedf2;
  border: 1px solid #a48686;
  border-bottom: none;
  border-top-right-radius: 2em;
  border-top-left-radius: 1.5em;
}

JS BIN到目前为止的代码

有人可以帮助我使用纯css获得上面图像的输出吗？

谢谢。

Answer 1

Bootstrap可以轻松自定义标签及其行为。

对于颜色，请考虑在CSS中使用渐变，根据需要在相应的类中工作。这是一个不错的生成器：http://www.colorzilla.com/gradient-editor/

对于图标，您只需使用 FontAwesome （http://fontawesome.io/icons/）或类似网页。