使用CSS创建Half Circle Bootstrap Sidebar菜单是否可行？

Question

我一直在研究如何在我的主页上创建一个半圆边栏。 有没有一种方法可以像使用bootstrap的例子一样创建设计？ 任何帮助表示赞赏。提前致谢。

Answer 1

边界半径：100％;

然后，您将需要将内容嵌套在带有填充左侧的div中，并将包含div位置的负位置留在页面上。

您可能还需要在容器中使用overflow：hidden。

这是一个基本的首发只用普通的旧引导导航：

https://jsfiddle.net/jeremykenedy/mqhcaz75/1/

CSS：

body { 
     background: #163040; 
     color: #ffffff; 
    } 
    #wrapper { 
     padding-left: 0; 
     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     transition: all 0.5s ease; 
    } 
    #wrapper.toggled { 
     padding-left: 150px; 
    } 
    #sidebar-wrapper { 
     position: fixed; 
     left: 224px; 
     z-index: 1000; 
     overflow-y: auto; 
     margin-left: -345px; 
     width: 0; 
     height: 100%; 
     -webkit-transition: all 0.5s ease; 
     -moz-transition: all 0.5s ease; 
     -o-transition: all 0.5s ease; 
     transition: all 0.5s ease; 
     border-radius: 0 50% 50% 0; 
     height: 249px; 
     overflow: hidden; 
     top: 20%; 
     box-shadow: inset -1px 0px 100px 2px rgba(0, 0, 0, .4), 1px 0px 100px 1px rgba(255, 255, 255, .02); 
    } 
    #wrapper.toggled #sidebar-wrapper { 
     width: 240px; 
    } 
    #page-content-wrapper { 
     padding: 15px; 
     width: 100%; 
    } 
    #wrapper.toggled #page-content-wrapper { 
     position: absolute; 
     margin-right: -250px; 
    } 
    /* Sidebar Styles */ 

    .sidebar-nav { 
     position: absolute; 
     top: 22px; 
     margin: 0; 
     padding: 0; 
     width: 234px; 
     list-style: none; 
     padding-left: 128px; 
    } 
    .sidebar-nav li { 
     line-height: 40px; 
     margin-left: 20px; 
    } 
    .sidebar-nav li a { 
     display: block; 
     width: 246%; 
     margin-left: -30px; 
     padding-left: 37px; 
    } 
    .sidebar-nav li:nth-child(1) a {} .sidebar-nav li:nth-child(2) a { 
     padding-left: 62px; 
    } 
    .sidebar-nav li:nth-child(3) a { 
     padding-left: 72px; 
    } 
    .sidebar-nav li:nth-child(4) a { 
     padding-left: 62px; 
    } 
    .sidebar-nav li:nth-child(5) a {} .sidebar-nav li a { 
     display: block; 
     color: #999999; 
     text-decoration: none; 
    } 
    .sidebar-nav li a:hover { 
     background: rgba(255, 255, 255, 0.2); 
     color: #fff; 
     text-decoration: none; 
    } 
    .sidebar-nav li a:active, 
    .sidebar-nav li a:focus { 
     text-decoration: none; 
    } 
    .sidebar-nav > .sidebar-brand { 
     height: 65px; 
     font-size: 18px; 
     line-height: 60px; 
    } 
    .sidebar-nav > .sidebar-brand a { 
     color: #999999; 
    } 
    .sidebar-nav > .sidebar-brand a:hover { 
     background: none; 
     color: #fff; 
    } 
    @media (min-width: 768px) { 
     #wrapper { 
      padding-left: 250px; 
     } 
     #wrapper.toggled { 
      padding-left: 0; 
     } 
     #sidebar-wrapper { 
      width: 250px; 
     } 
     #wrapper.toggled #sidebar-wrapper { 
      width: 0; 
     } 
     #page-content-wrapper { 
      padding: 20px; 
     } 
     #wrapper.toggled #page-content-wrapper { 
      position: relative; 
      margin-right: 0; 
     } 
    } 

HTML：

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container-fluid"> 
     <div class="navbar-header"> 
      <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span></button> <a class="navbar-brand" href="#menu-toggle" id="menu-toggle"><span aria-hidden="true" class="glyphicon glyphicon-list"></span></a> 
     </div> 
     <div class="navbar-collapse collapse" id="navbar"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-home"></span> Home</a> 
       </li> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-question-sign"></span> Messages</a> 
       </li> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-question-sign"></span> Help</a> 
       </li> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-off"></span> Log Out</a> 
       </li> 
      </ul> 
      <form action="#" class="navbar-form navbar-right" method="get"> 
       <div class="input-group"> 
        <input class="form-control" id="query" name="search" placeholder="Search..." type="text" value=""> 
        <div class="input-group-btn"> 
         <button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search"></span></button> 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</nav> 

<div class="toggled" id="wrapper"> 
    <div class="container-fluid"> 
     <!-- Sidebar --> 
     <div id="sidebar-wrapper"> 
      <ul class="sidebar-nav"> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-calendar"></span></a> 
       </li> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-time"></span></a> 
       </li> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-dashboard"></span></a> 
       </li> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-user"></span></a> 
       </li> 
       <li> 
        <a href="#"><span aria-hidden="true" class="glyphicon glyphicon-cog"></span></a> 
       </li> 
      </ul> 
     </div><!-- /#sidebar-wrapper --> 
     <!-- Page Content --> 
     <div id="page-content-wrapper"> 
      <div class="container-fluid"></div> 
     </div><!-- /#page-content-wrapper --> 
    </div> 
</div>