Twitter bootstrap 带中央底部切口的引导按钮

我试图在引导中创建一个按钮，看起来像

我在link上试过这个代码，但不起作用。这是我的密码

HTML:

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 cut" >               
    <div class="cut-bd cut-bd_red">
      <div class="cut-hd cut-hd_red">
            <button class="btn btn-primary btn-left-bar hdg">Home</button>
      </div>  
    </div>  
</div>

---

请给我任何参考或提示

引导CSS覆盖了剪切边缘的一些CSS。我是否也需要在按钮上应用此选项

CSS参考：

我使用了CSS方法 .习俗{ 背景色：黑色！重要； 边框颜色：黑色！重要； 位置：相对位置； 高度：50px！重要； } .三角形{ 宽度：50px； 高度：0px； 边框底部：10px实心e74c3c； 边框顶部：10px实心透明； 右边框：10px实心透明； 左边框：10px实心透明； 位置：绝对位置； 底部：-1px； 溢出：隐藏； 左：9px； } .切{ 溢出：隐藏； 填充：0 30px！重要； } .切bd{ 填充：15px 15px 0； 位置：相对位置； } .cut高清{ 利润率：0.05倍； 填充：0 0 5px； } .cut-hd_红色{ 边框底部：1px实心e43725； } .cut-hd_绿色{ 边框底部：1px纯黑； } .cut-bd_黑色{ 背景：黑色； 颜色：ecf0f1； 文本阴影：1px1pRGBA255、255、255、0.2； } .cut-bd_黑色：之前{ 内容：； 宽度：100%； 高度：30px； 位置：绝对位置； 最高：100%； 右：30px； 背景：黑色； } .cut-bd_黑色：之后{ 内容：； 宽度：0； 身高：0； 左边距：-30px； 位置：绝对位置； 最高：100%； 左：100%； 边框：15px纯黑； 右边框：15px实心透明； 边框底部：15px实心透明； } .cut-bd_红色{ 背景：e74c3c； 颜色：ecf0f1； 文本阴影：1px1pRGBA255、255、255、0.2； } .cut-bd_red:之前{ 内容：； 宽度：100%； 高度：30px； 位置：绝对位置； 最高：100%； 右：30px； 背景：e74c3c； } .cut-bd_red：之后{ 内容：； 宽度：0； 身高：0； 左边距：-30px； 位置：绝对位置； 最高：100%； 左：100%； 边框：15px固体e74c3c； 右边框：15px实心透明； 边框底部：15px实心透明； } .cut-bd_绿色{ 边框顶部：5px实心ecf0f1； 背景：1abc9c； 颜色：ecf0f1； 文本阴影：1px1pRGBA255、255、255、0.2； } .cut-bd_绿色：之前{ 内容：； 宽度：100%； 高度：30px； 位置：绝对位置； 最高：100%； 右：30px； 背景：1abc9c； } .cut-bd_绿色：之后{ 内容：； 宽度：0； 身高：0； 左边距：-30px； 位置：绝对位置； 最高：100%； 左：100%； 边框：15px固体1abc9c； 右边框：15px实心透明； 边框底部：15px实心透明； } .介绍{ 颜色：ecf0f1； 字号：3em； 字体大小：粗体； 文本对齐：居中； 文本转换：大写； 字母间距：2px； 文本阴影：3px 3px 233140； } .hdg{ 颜色：ffff； 字体大小：20px； 字体大小：粗体； 文本转换：大写； } 家

---

非常感谢你，我只想button@SandipArmalPatil更新了我的答案，将提供链接，等等，您是否可以从底部中间剪切…@Sandip您能告诉我这将是什么样子，我对requirementi上传的图像感到困惑。你们会在底部看到切口，但在拐角处看不到。。切口在底部中间。请检查我问题中的图片

    .cut {
  overflow: hidden;
  padding: 0 0 30px;
}

.cut-bd {
  padding: 15px 15px 0;
  position: relative;
}

.cut-hd {
  margin: 0 0 5px;
  padding: 0 0 5px;
}

.cut-hd_red { border-bottom: 1px solid darken(#e74c3c,5%); }
.cut-hd_green { border-bottom: 1px solid darken(#1abc9c,50%); }

.cut-bd_red {
  background: #e74c3c;
  color: #ecf0f1;
  text-shadow: 1px 1px rgba(#ffffff,.2);
  &:before {
    content: "";
    width: 100%;
    height: 30px;
    position: absolute;
    top: 100%;
    right: 30px;
    background: #e74c3c;
  }
  &:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: -30px;
    position: absolute;
    top: 100%;
    left: 100%;
    border: 15px solid #e74c3c;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }
}

.cut-bd_green {
  border-top: 5px solid #ecf0f1;
  background: #1abc9c;
  color: #ecf0f1;
  text-shadow: 1px 1px rgba(#ffffff,.2);
  &:before {
    content: "";
    width: 100%;
    height: 30px;
    position: absolute;
    top: 100%;
    right: 30px;
    background: #1abc9c;
  }
  &:after {
    content: "";
    width: 0;
    height: 0;
    margin-left: -30px;
    position: absolute;
    top: 100%;
    left: 100%;
    border: 15px solid #1abc9c;
    border-right: 15px solid transparent;
    border-bottom: 15px solid transparent;
  }
}

.intro {
  color: #ecf0f1;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 3px 3px rgba(darken(#2c3e50,5%),1);
}

.hdg {
  color: #ffff;
  font-size: 20px;
  font-weight: bold;
  text-transform: uppercase;
}