Bootstrop按鈕與中心底部切割

Question

我試圖在bootstrap中創建按鈕，看起來像。

我想這個代碼this鏈接，但它不工作。這是我的代碼。

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代碼：

.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; 
} 

請向我提供任何參考或提示。

Answer 1

Bootstrap CSS正在重寫一些用於切邊的CSS。我是否也需要將此應用於按鈕上？

CSS參考：

1. Beveled Edges（我用CSS法）

.custom { 
 
    background-color: black !important; 
 
    border-color:black !important; 
 
    position:relative; 
 
    height:50px !important; 
 
} 
 
.triangle{ 
 
width:50px; 
 
height:0px; 
 
border-bottom:10px solid #e74c3c; 
 
border-top:10px solid transparent; 
 
border-right:10px solid transparent; 
 
border-left:10px solid transparent; 
 
position:absolute; 
 
bottom:-1px; 
 
overflow:hidden; 
 
left:9px; 
 
} 
 
.cut { 
 
    overflow: hidden; 
 
    padding: 0 0 30px !important; 
 
} 
 

 
.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 #e43725; 
 
} 
 

 
.cut-hd_green { 
 
    border-bottom: 1px solid black; 
 
} 
 

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

 
.cut-bd_red { 
 
    background: #e74c3c; 
 
    color: #ecf0f1; 
 
    text-shadow: 1px 1px rgba(255, 255, 255, 0.2); 
 
} 
 
.cut-bd_red:before { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 30px; 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 30px; 
 
    background: #e74c3c; 
 
} 
 
.cut-bd_red: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(255, 255, 255, 0.2); 
 
} 
 
.cut-bd_green:before { 
 
    content: ""; 
 
    width: 100%; 
 
    height: 30px; 
 
    position: absolute; 
 
    top: 100%; 
 
    right: 30px; 
 
    background: #1abc9c; 
 
} 
 
.cut-bd_green: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 #233140; 
 
} 
 

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<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 custom">Home<div class="triangle"> </div></button> 
 
      
 
     </div> 
 
    </div> 
 
</div>