Jquery 如何在boostrap导航栏的中心为徽标创建一个半圆？

我坚持在引导导航栏内创建一个半圆，就像。我在引导中创建了一个正常的浮动导航

<header id="header">
    <nav id="main-menu" class="navbar navbar-default navbar-fixed-top" role="banner">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>

            </div>

            <div class="collapse navbar-collapse navbar-right">
                <ul class="nav navbar-nav">
                    <li class="scroll active"><a href="#home">Home</a></li>
                    <li class="scroll"><a href="#features">Features</a></li>
                    <li class="scroll"><a href="#services">Services</a></li>
                    <li class="scroll"><a href="#portfolio">Portfolio</a></li>
                    <li class="scroll"><a href="#about">About</a></li>
                    <li class="scroll"><a href="#meet-team">Team</a></li>
                    <li class="scroll"><a href="#pricing">Pricing</a></li>
                    <li class="scroll"><a href="#blog">Blog</a></li> 
                    <li class="scroll"><a href="#get-in-touch">Contact</a></li>                        
                </ul>
            </div>
        </div><!--/.container-->
    </nav><!--/nav-->
</header><!--/header-->

---

请帮我解决这个问题

最好使用photoshop或sketch完成这项工作。创建半圆形徽标并放置在导航栏的中心。 用这个

维洛尔三一学校
















Web内容显示Web内容显示

您需要为徽标创建另一个

ul

，然后相应地设置

边框半径。我想你会明白该怎么做。
谢谢你，好主意！您在codepen上提供的代码片段完全符合我的要求。。。
//mycss
.nav-semi{ 
  height: 220px;
  width: 350px;
  border-radius: 0px 0px 490px 490px;
  -moz-border-radius: 90px 90px 0 0;
  -webkit-border-radius: 90px 90px 0 0;
  background: #f2f2f2 url("http://semantic-ui.com/images/logo.png") no-repeat center;
}