カスタムコーナーのhtmlボタン

Question

現在、私はブートストラップを使ってウェブサイトのナビゲーションバーを設計しています。メインナビゲーションバーと直接最初の下二つあり、画像を参照してください。

を私は簡単なCSSでボタンの下の角を丸めるために管理が、私が好きな上部の角が達成するためにこのような何か：

はCSS/jQueryのまたは追加のプラグインでこれを行う方法はありますか？

EDIT：

HTMLボタンのは、次のとおりです。

<button type="submit" class="btn navbar-btn second-navbar-button"> 
    <span class="mdi mdi-eye second-navbar-icon"></span> 
    <span class="second-navbar-name">&nbsp;Overview</span> 
</button> 

ボタンのCSSには、以下の

.second-navbar-button { 
    font-size: 26px; 
    border: none; 
    background-color: transparent; 
    color: #ec9f14; 
    margin: 0 19px 0 19px; 
    padding: 0px 8px 0px 8px; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-left-radius: 10px; 
    border-bottom-right-radius: 10px;} 

のように見えるので、の角を操作するボタンの間のスペースがあります隣のボタンは機能しません。

乾杯、

Trammy

Answer 1

は、この例を参照してください：

.button{ 
 
    border:1px solid red; 
 
    border-bottom:0; 
 
    width:80px; 
 
    height:40px; 
 
    margin:30px; 
 
    position:relative; 
 
    -moz-border-radius:5px 5px 0 0; 
 
    -webkit-border-radius:5px 5px 0 0; 
 
} 
 
.button:after, 
 
.button:before{ 
 
    content:''; 
 
    width:40px; 
 
    height:30px; 
 
    border:1px solid red; 
 
    position:absolute; 
 
    bottom:-3px; 
 
    border-top:0; 
 
} 
 
.button:after{ 
 
    border-left:0; 
 
    -moz-border-radius:0 0 5px 0; 
 
    -webkit-border-radius:0 0 5px 0; 
 
    left:-41px; 
 
} 
 
.button:before{ 
 
    border-right:0; 
 
    -moz-border-radius:0 0 0 5px; 
 
    -webkit-border-radius:0 0 0 5px; 
 
    right:-41px; 
 
}

<div class="button">text</div>