如何在顶部带有半圆边框的HTML / CSS中创建元素？

Question

我想在HTML / CSS中创建一个元素，如下所示：

基本上，我想在顶部中间创建一个带有边框的半圆，然后在该半圆内有一个较小的圆圈，其中有一个字符居中（如上图中的X）。此外，在此元素中，可能存在任何数量的文本/图像等。

非常感谢有关创建此类元素的最佳方法的任何帮助。

提前多多感谢。

Answer 1

这里棘手的部分是将半圆放在上面。 您只需将高度设置为宽度的一半，并仅设置border-radius的前2个值。

<强> FIDDLE

标记

<div class="outer">
    <div class="inner">X</div>
    Text here
</div>

CSS

.outer
{
    width: 300px;
    height: 100px;
    line-height: 100px;
    border: 1px solid black;
    background: lightBlue;
    position:relative;
    margin: 50px;

    font-size: 42px;
    text-align: center;

}
.outer:before
{
    content: '';
    width: 48px;
    height: 24px;
    position: absolute;
    left:0;right:0;
    top: -24px;
    z-index: -1;
    margin:auto;
    border-radius: 24px 24px 0 0;
    border: 1px solid black;
    background: lightBlue;
}
.inner
{
    width: 44px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    left:0;right:0;
    top: -22px;
    margin:auto;
    border-radius: 22px;
    border: 2px solid lightBlue;
    font-size: 32px;
    background: orange;
    text-align: center;
}

Answer 2

以下是绝对位置和大小的示例：

修改

摆脱圆圈上奇怪的边框效果：

http://jsfiddle.net/9JFpu/

它使用了更多的CSS和更多的html标签，但它解决了这个问题！ 注意：代码有点乱，可以美化！

---

http://jsfiddle.net/D3tKE/

<强> HTML：

<div class="mySuperFancyEffect">
    <div class="square"></div>
    <div class="circle">
        <div class="inner-circle"></div>
    </div>
</div>

<强> CSS：

.mySuperFancyEffect {
    position: relative;
}

.mySuperFancyEffect .square {
    position: absolute;
    width: 180px;
    height: 65px;
    background-color: #66C;
    border: 1px solid #000;
    margin-top: 20px;
}

.mySuperFancyEffect .circle {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #66C;
    border-top: 1px solid #000;
    margin-left: 70px;
}

.mySuperFancyEffect .inner-circle {
    width: 36px;
    height: 36px;
    border-radius: 20px;
    background-color: #DAA74C;
    margin: 2px;
}

Answer 3

你可以用这个CSS

来做

#circletop{
    width:100px;
    height:100px;
    border-top:1px solid black;
    border-top-left-radius:100px;
    border-top-right-radius:100px;
}

这是一个Fiddle来演示

Answer 4

您可以尝试类似

的内容

#rectangle {
    display: block;
    position: relative;
    width: 50%;
    background: blue;
    }

#circle {
    display: inline-block;
    position: absolute;
    width: 5%;
    top: -2%;
    left: 48%;
    border-radius: 800px;
    background: orange;
    border: 2px solid blue;
}