Custom styles for boot tabs

Question

I am trying to change the bootstrap tab style. Therefore, my custom style should be similar to these image styles.

I tried it like this, but it does not work. The main thing is not skew the bottom of each tab.

.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 with code still

Can someone help me get the result as shown above using pure css?

Thank.

Answer 1

Bootstrap makes it easy to customize tabs and their behavior.

CSS, , . : http://www.colorzilla.com/gradient-editor/

FontAwesome (http://fontawesome.io/icons/) -.