Question

我正在尝试使用CSS创建一个独特的形状。

然而，在半圆的底部有太多flat。是否有可能，我可以让曲线在没有扁线的情况下恰好在中间相遇？

代码：

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

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

Answer 2

您可以使用10.times {|i| Boo.new(i) } Boo.all #=> [#<Boo:0x256f428 @a=1>, #<Boo:0x256f3b0 @a=2>, #<Boo:0x256f368 @a=3>, #<Boo:0x256f338 @a=4>, #<Boo:0x256f2f0 @a=5>, #<Boo:0x256f2d8 @a=6>, #<Boo:0x256f2a8 @a=7>, #<Boo:0x256f290 @a=8>, #<Boo:0x256f278 @a=9>, #<Boo:0x256f260 @a=10>] Boo.find(9) #=> #<Boo:0x256f278 @a=9>类

的高度和底部css属性

.full-circle

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

Fiddle

Answer 3

您可以减小宽度以匹配border-radius。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

在全圆类上有2个高度属性，在删除第一个属性之前有点混乱。

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/

更新

我有点工作......不管怎样，你欠我一杯啤酒！

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

或者这个稍微好一点？ https://jsfiddle.net/p9hynbrb/

CSS半圆效应

4 个答案: