Question

我正在努力实现这种设计，在中心内部有一个带有徽标的半圆形。请参考下面给出的链接。

我曾尝试使用CSS制作半圆，但它不适合我想要的设计。我一个接一个地使用了2个jumbotrons。半圆应该覆盖两个jumbotron上的区域，如图中所示（上面提到的链接）。如何实现这一设计，我们对此表示赞赏。

HTML：

printf "Countries are %s" "$countries"

CSS：

<div class="jumbotron">
    <div class="container navheader">
    <div class="social">
        <a href=""><i class="fa fa-facebook " aria-hidden="true"></i></a>
        <a href=""><i class="fa fa-google-plus " aria-hidden="true"></i></a>
        <a href=""><i class="fa fa-instagram " aria-hidden="true"></i></a>
    </div>
    <div class="contact-us">
        <a href="">
            <i class="fa fa-phone " aria-hidden="true">&nbsp;
        <label class="icon-label">CALL 0417 949 773</label></i></a>
        </div>
    </div>
</div>
<div class="jumbotron other-color">
    <div class="container navheader">
        <div class="user-actions">
            <button class="btn btn-link" data-toggle="modal" data-
               target="#sign-in">
                <i class="fa fa-lock" aria-hidden="true">&nbsp;
                    <label class="icon-label">SIGN IN</label>
                </i>
            </button>
            <button class="btn btn-link" data-toggle="modal" data-
            target="#sign-up">
                <i class="fa fa-user " aria-hidden="true">&nbsp;
                    <label class="icon-label">CREATE AN ACCOUNT</label>
                </i>
            </button>
    </div>
    <div class="div-semicircle top"></div>
        <div class="cart">
            <a href=""><i class="fa fa-shopping-cart " aria-
             hidden="true">&nbsp;
                <label class="icon-label">2 ITEM(S)</label>
            </i></a>
        </div>
    </div>
</div>

更新： 解决方案：如果有人想知道，请参阅第一条评论中的@bhv示例，以供参考，并根据您的要求进行调整。

Answer 1

首先，您发布的代码没有任何帮助......我仍然会尝试给出一个如何实现链接图像的程序

创建div 而不是类.container
在上面创建的div
在同一div内的导航下创建一个jumbotron并包含它在 div with class container
在这3个之间设置边距，将它们组合在一起
可以清楚地看到你不需要半圆 .. 你需要使用椭圆 clip-path: ellipse(65px 30px at 125px 40px);这样的东西来创建它 div 然后以你想要使用css的方式定位它并给它最高的z-index，使它呈现为最顶层。
捕食它有效!! ; - ）

Answer 2

你必须使用position：absolute来覆盖两个jumbotron 将这些代码行添加到此类：.div-semicircle。

    position: absolute;
    top: 23%;
    left: 40%;

在Jumbotron顶部的中心添加一个半圆

2 个答案: