html - 添加CSS圆圈-裁剪圆圈的上半部分

我的网站上有以下按钮：
http://jsfiddle.net/32u5x5uf/
我想首先移动跨度圆，使其正好位于主按钮的中心。然后我想如果我能在CSS中“合并”这两个形状。所以基本上去掉圆圈的上半部分和穿过圆圈中间的主条。

.full-circle {
 border: 2px solid #1588CB;
 height: 35px;
 width: 35px;
 -moz-border-radius:30px;
 -webkit-border-radius: 30px;
 position:absolute;
bottom:-20px;
}

button {
background:#ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}

<button>Learn More
    <span class="full-circle">+</span>
</button>

最佳答案

.full-circle {
 border: 2px solid #1588CB;
 height: 35px;
 width: 35px;
-moz-border-radius:30px;
-webkit-border-radius: 30px;
 position:absolute;
 bottom:-20px;
}

button {
background:#ffffff;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border: 2px solid #1588CB;
color:#1588CB;
font-weight:400;
height:200px;
width:400px;
position:relative;
}

/* overides ... */
.full-circle {
  border-radius: 0 0 30px 30px;
  border-top: none;
  height: 17px;
  background: #FFF;
  left: 50%;
  margin-left: -17px;
  bottom: -19px;
  line-height: 0;
}

<button>Learn More
    <span class="full-circle">+</span>
</button>

关于html - 添加CSS圆圈-裁剪圆圈的上半部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33522620/