添加CSS圈 - 麥田怪圈

的上半部分我有我的網站下面的按鈕： http://jsfiddle.net/32u5x5uf/添加CSS圈 - 麥田怪圈

我首先要移動的跨度圓恰好在主按鈕的中心。然後我會喜歡，如果我能以某種方式在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>

來源

2015-11-04 michaelmcgurk

u能請張貼的箱子應該如何看的圖像？ –

對不起，這是個好主意。在這裏，我們是：http://imgur.com/JQjmymJ – michaelmcgurk

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

來源

2015-11-04 13:10:29 Turnip

獲勝者！謝謝。 – michaelmcgurk

以上答案由Turnip實際上是一種帶有相同

background-color

作弊

如果不是，那麼你應該用這個去的情況：

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

<div></div>

來源

2016-08-05 20:05:56 Ahmad

添加CSS圈 - 麥田怪圈

回答

相關問題