CSS半圆效应

Question

I am trying to create a unique shape using solely CSS.

Here is what I have so far: http://jsfiddle.net/u6vu96u8/

However, there is too much flat at the base of the semi-circle. Is it possible, I can just get the curves to meet exactly in the middle without the flat line?

Code:

 button { font-size: 1em; background: #ffffff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #1588cb; color: #1588cb; font-weight: 400; height: 60px; width: 300px; position: relative; margin: 25px 0 50px 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } .full-circle { border: 1px solid #1588cb; height: 35px; width: 45px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; border-radius: 0 0 45px 45px; border-top: none; height: 15px; background: #ffffff; position: absolute; left: 50%; margin-left: -17px; bottom: -16px; line-height: 0; } 

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

Answer 1

Your full-circle class has a width of 45px, whereas it has a border radius of 30px. If you want it to be a semicircle, you need the same border radius as width. Changing the width to 30px appears to do what you want (try it)

Answer 2

You can play with height and bottom css properties for the .full-circle class

 button { font-size: 1em; background: #ffffff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #1588cb; color: #1588cb; font-weight: 400; height: 60px; width: 300px; position: relative; margin: 25px 0 50px 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } .full-circle { border: 1px solid #1588cb; height: 35px; width: 45px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; border-radius: 0 0 45px 45px; border-top: none; height: 19px; background: #ffffff; position: absolute; left: 50%; margin-left: -17px; bottom: -20px; line-height: 0; } 

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

Fiddle

Answer 3

You could decrease the width to match the border-radius.

 button { font-size: 1em; background: #ffffff; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; border: 1px solid #1588cb; color: #1588cb; font-weight: 400; height: 60px; width: 300px; position: relative; margin: 25px 0 50px 0; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; } .full-circle { border: 1px solid #1588cb; height: 15px; width: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; -o-box-sizing: content-box; box-sizing: content-box; border-radius: 0 0 45px 45px; border-top: none; background: #ffffff; position: absolute; left: 50%; margin-left: -17px; bottom: -16px; line-height: 0; } 

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

Answer 4

You have 2 height attributes on the full-circle class, was a bit confusing until I removed the first one.

button {
    font-size: 1em;
    background: #fff;
    border-radius: 10px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border: 1px solid #1588cb;
    color: #1588cb;
    font-weight: 400;
    height: 60px;
    width: 300px;
    position: relative;
    margin: 25px 0 50px 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
}

.full-circle {
    display:block;
    border: 1px solid #1588cb;
    width: 45px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    -o-box-sizing: content-box;
    box-sizing: content-box;
    border-radius: 0 0 60px 60px;
    border-top: none;
    height: 25px;
    background: #fff;
    position: absolute;
    left: 50%;
    margin-left: -17px;
    bottom: -26px;
    line-height: 0;
}

https://jsfiddle.net/hj3g3gjL/

---

Update:

I sort of got it working... Either way, you owe me a beer!

.full-circle {
        display:block;
        border-bottom: 1px solid #1588cb;
        width: 45px;
        -moz-border-radius: 45px / 36px;
        -webkit-border-radius: 45px / 36px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        -o-box-sizing: content-box;
        box-sizing: content-box;
        border-radius: 45px / 36px;
        height: 35px;
        background: #fff;
        position: absolute;
        left: 50%;
        margin-left: -17px;
        bottom: -17px;
        line-height: 40px;
    }

https://jsfiddle.net/awea2s2y/

or maybe this one is slightly better? https://jsfiddle.net/p9hynbrb/