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

Question

我的网站上有以下按钮： 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>

Answer 1

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

Answer 2

上面Turnip的答案实际上是一种欺骗

background-color

如果情况并非如此，那么你应该这样做：

＆＃13;

＆＃13;

div {
    background-color: #80C5A0;
    width: 200px;
    height: 100px;
    border-radius: 50% / 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

＆＃13;

<div></div>

＆＃13;

＆＃13;

＆＃13;