Html CSS半圆效应

我试图创建一个独特的形状只用CSS

以下是我到目前为止的情况：

但是，在半圆的底部有太多的

平面

。 有没有可能，我可以让曲线刚好在没有平坦线的中间相遇？

代码：

按钮{
字号：1em；
背景：#ffffff；
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
边框：1px实心#1588cb；
颜色：1588cb；
字体大小：400；
高度：60px；
宽度：300px；
位置：相对位置；
利润率：25px0.50px0；
-webkit框大小：内容框；
-moz框大小：内容框；
-o盒尺寸：内容盒；
框大小：内容框；
}
.整圈{
边框：1px实心#1588cb；
高度：35px；
宽度：45px；
-moz边界半径：30px；
-webkit边界半径：30px；
-webkit框大小：内容框；
-moz框大小：内容框；
-o盒尺寸：内容盒；
框大小：内容框；
边界半径：0 0 45px 45px；
边界顶部：无；
高度：15px；
背景：#ffffff；
位置：绝对位置；
左：50%；
左边距：-17px；
底部：-16px；
线高：0；
}

新闻
+

您的全圆类的宽度为45px，而边界半径为30px。如果希望它是半圆，则需要与宽度相同的边界半径。将宽度更改为30px似乎可以执行您想要的操作（尝试）

您可以使用

类的高度和底部css属性


按钮{
字号：1em；
背景：#ffffff；
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
边框：1px实心#1588cb；
颜色：1588cb；
字体大小：400；
高度：60px；
宽度：300px；
位置：相对位置；
利润率：25px0.50px0；
-webkit框大小：内容框；
-moz框大小：内容框；
-o盒尺寸：内容盒；
框大小：内容框；
}
.整圈{
边框：1px实心#1588cb；
高度：35px；
宽度：45px；
-moz边界半径：30px；
-webkit边界半径：30px；
-webkit框大小：内容框；
-moz框大小：内容框；
-o盒尺寸：内容盒；
框大小：内容框；
边界半径：0 0 45px 45px；
边界顶部：无；
高度：19px；
背景：#ffffff；
位置：绝对位置；
左：50%；
左边距：-17px；
底部：-20px；
线高：0；
}
News+
您可以减小宽度以匹配边框半径


按钮{
字号：1em；
背景：#ffffff；
边界半径：10px；
-moz边界半径：10px；
-webkit边界半径：10px；
边框：1px实心#1588cb；
颜色：1588cb；
字体大小：400；
高度：60px；
宽度：300px；
位置：相对位置；
利润率：25px0.50px0；
-webkit框大小：内容框；
-moz框大小：内容框；
-o盒尺寸：内容盒；
框大小：内容框；
}
.整圈{
边框：1px实心#1588cb；
高度：15px；
宽度：30px；
-moz边界半径：30px；
-webkit边界半径：30px；
-webkit框大小：内容框；
-moz框大小：内容框；
-o盒尺寸：内容盒；
框大小：内容框；
边界半径：0 0 45px 45px；
边界顶部：无；
背景：#ffffff；
位置：绝对位置；
左：50%；
左边距：-17px；
底部：-16px；
线高：0；
}
News+
您在full circle类中有两个高度属性，在我删除第一个属性之前有点混乱

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;
}



更新：

我有点让它工作了。。。不管怎样，你欠我一杯啤酒

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


或者这个稍微好一点
 嗯，那很容易：-D非常感谢你@michaelmcgurk没问题。顺便说一句，您已经在full circle类上设置了两次“height”属性（顶部设置为35px，底部设置为15px）。其中只有一个会生效，有两个只会引起混乱您的
类中有两个声明的高度。整圈
类中，只有后一个会被使用DHI Darren，谢谢。对于
高度
重复值表示歉意。有没有办法让这个半圆形状的宽度
45px
和高度
16px
？@michaelmcgurk查看更新，很接近。。我已经受够了一天的摆弄！很抱歉我耽搁了。非常感谢你的努力。有没有办法修复半圆边界在两侧逐渐变细的方式，看看边界是如何变薄的。我们能解决这个问题吗？@michaelmcgurk我有一个快速的游戏，但整个过程中都找不到台词。你可能想考虑使用背景图像来做这个吗？谢谢你，戴伦。这确实有点像野兽——我现在在Chrome和Firefox之间遇到了一些奇怪的问题：-/