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参考：

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>

中心底部切割的Bootstrop按钮

1 个答案: