CODEWITHSUNDEEP
htmlcss
michaelmcgurk
michaelmcgurk

Reputation: 6509

Add CSS circle - crop top half of circle

I have the following button on my site: http://jsfiddle.net/32u5x5uf/

I'd first like to move the span circle to be exactly in the center of the main button. I'd then like if I can somehow "merge" the two shapes together in CSS. So basically remove the top half of the circle and the main bar that cuts through the middle of the circle.

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

Upvotes: 2

Views: 682

Answers (2)

Ahmad
Ahmad

Reputation: 2707

The Answer above by Turnip is actually kind of a cheat with same

background-color

If that's not the case then you should go with this:

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

Upvotes: 1

Turnip
Turnip

Reputation: 36642

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

Upvotes: 10

Related Questions