创建半径为的按钮

Question

我想在图片上创建这样的东西，但是我不知道如何在html [bootstrap]中创建带有底部边框的按钮？

以下是我想要创建的示例

是否可以创建这样的按钮或在css中执行某些操作。 这是我的尝试..

<div class="col-md-12">

    <a class=" col-md-6 btn btn-success btn-large btn1" href="#" style="color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81)); background-color: rgb(81, 163, 81);">Success</a>

    <a class=" col-md-6 btn btn-success btn-large btn2" href="#" style="color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81)); background-color: rgb(81, 163, 81);">Success</a>

    <div class="circle">
 <img class=" logo img-responsive" src="images/biz_club.jpg"/></div> 
    </div>

    <a class=" col-md-6 btn btn-success btn-large btn3" href="#" style="color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81)); background-color: rgb(81, 163, 81);">Success</a>

    <a class=" col-md-6 btn btn-success btn-large btn4" href="#" style="color: rgb(255, 255, 255); background-image: -moz-linear-gradient(center top , rgb(98, 196, 98), rgb(81, 163, 81)); background-color: rgb(81, 163, 81);">Success</a>
</div>

这看起来不错，但我需要弯曲按钮的边框底部。

Answer 1

您可以使用：border-radius，overflow，position和transform。的 DEMO

HTML

<div>
  <a href><span>Success</span></a>
  <a href><span>Success</span></a>
  <a href><span>Success</span></a>
  <a href><span>Success</span></a>
 <img  src="http://dummyimage.com/140x140/059/000&text=TEXT"/>
</div>

CSS

div {
  width:200px;
  margin:1em auto;
  position:relative;
}
a  {
  float:left;
  height:100px;
  width:100px;
  background:gray;  
  text-align:center;
}
a span {
  display:inline-block;
  transform:rotate(-45deg);
  line-height:70px;
  color:white;
}
a+a span {/* or use a:nth-child(2) span or a ~ a span */
  transform:rotate(45deg);
}
a+a+a span {
  transform:rotate(-135deg);
  line-height:125px;
}
a+a+a+a span {
  transform:rotate(135deg);
  line-height:125px;
}

a+a {/* or use a:nth-child(2) or a ~ a */
  background:lime;
}
a+a+a {
  background:purple;
}
a+a+a+a {
  background:tomato;
}
img {
  position:absolute;
  top:30px;
  left:30px;
}
div, img {
  border-radius:100%;
  overflow:hidden;
  box-shadow:0 0 5px;
}