【问题标题】：Half Circle CSS半圆 CSS
【发布时间】：2016-10-06 20:10:58
【问题描述】：

有什么办法可以解决这个问题吗？我尝试更改边界半径值并进行大量搜索以实现下图中的设计。我想我错过了一些东西，谁能指出我的风格有什么问题。

这里是代码。

 #wrapper.toggled {
padding-left: 150px;
}

#sidebar-wrapper {
position: fixed;
left: 224px;
z-index: 1000;
overflow-y: auto;
margin-left: -345px;
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% 80% 50% 0;
height: 400px;
overflow: hidden;

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: 350px;
}

这是我的 HTML 代码

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

我想实现这样的目标，但我无法自定义边框。

【问题讨论】：

使用此代码：#wrapper.toggled #sidebar-wrapper { width: 400px; }，也仅使用border-radius: 50%
我以前试过。
你能提供一个可行的例子吗？
Draw half circle with CSS or SVG的可能重复

标签： html css css-shapes

【解决方案1】：

这是我的带有悬停效果的完整代码

[![<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#sidebar-wrapper{ width:500px; height:500px;border-radius: 50%;margin-left: -25%; background:#183343;    margin-top: 67px;}
.new-con a {
    font-size: 30px;
    color: #fff !important;
    margin-left: 30px;
    display: block;
}
.dashboard-icon.new-con {
        position: absolute;
    margin-left: 394px;
    margin-top: 229px;
}
.user-div.new-con{     margin-left: 382px;
    position: absolute;
    margin-top: 312px;}

.inner-border{ background:url(icon/new1.png);}
.cog-icon.new-con {
    margin-top: 393px;
    position: absolute;
    margin-left: 336px;
}
.dasbord-icon-inner {
    background: url(icon/das-black.png);
    width: 32px;
    height: 32px;
       background-size: 32px 32px !Important;
    background-repeat: no-repeat;
}
#sidebar-wrapper {
    position: relative;
}
.dasbord-icon-inner{ background:url(icon/das-black.png);}
.time-icon.new-con {
       margin-top: 152px;
    position: absolute;
    margin-left: 378px;
}
/* Calender Icon Start */
.calender-div.new-con {
    margin-top: 84px;
    position: absolute;
    margin-left: 340px;

}
.calender-div .inner-border {
    background: url(icon/new1.png);
    width: 43px;
    height: 45px;
    margin-left: 15px;
    position: absolute;
    top: -31px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(-47deg); display:none;
}
.calender-div:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.calender-div:hover .inner-border{ display:block;}
.calender-div .inner-con{
       margin-left: 44px;
    position: absolute;
    top: -70px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(-47deg);
   display: none; 
    color: #000;
    font-size: 20px;}
.calender-div:hover .inner-con{ display:block;}

/* Calender Icon end */
/* Calender Icon Start */

.time-icon .inner-border {
       background: url(icon/new1.png);
        width: 43px;
    height: 45px;
    margin-left: 32px;
    position: absolute;
    top: -25px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(-24deg); display:none;
}
.time-icon:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.time-icon:hover .inner-border{ display:block;}
.time-icon .inner-con{
         margin-left: 82px;
    position: absolute;
    top: -46px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(-23deg);
   display: none; 
    color: #000;
    font-size: 20px;}
.time-icon:hover .inner-con{ display:block;}

/* Calender Icon end */
/* Dasbord Icon */

.dashboard-icon .inner-border {
      background: url(icon/new1.png);
    width: 43px;
    height: 45px;
    margin-left: 40px;
    position: absolute;
    top: -15px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(-4deg); display:none;
}
.dashboard-icon:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.dashboard-icon:hover .inner-border{ display:block;}
.dashboard-icon .inner-con{
       margin-left: 94px;
    position: absolute;
    top: -13px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(-4deg);
    display: none;
    color: #000;
    font-size: 20px;}
.dashboard-icon:hover .inner-con{ display:block;}

/* Dasbord Icon end */



/* User Icon */

.user-div .inner-border {
      background: url(icon/new1.png);
    width: 43px;
    height: 45px;
    margin-left: 31px;
    position: absolute;
    top: 11px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(21deg);
    display: none;
}
.user-div:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.user-div:hover .inner-border{ display:block;}
.user-div .inner-con{
           margin-left: 82px;
    position: absolute;
    top: 36px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(14deg);
    display: none;
    color: #000;
    font-size: 20px;}
.user-div:hover .inner-con{ display:block;}

/* User Icon end */

/* Last Icon */

.cog-icon .inner-border {
     background: url(icon/new1.png);
    width: 43px;
    height: 45px;
    margin-left: 15px;
    position: absolute;
    top: 12px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-47deg);
    transform: rotate(47deg);
    display: none;
}
.cog-icon:hover .dasbord-icon-inner {
    background: url(icon/das-white.png);
    z-index: 10;
    position: relative;
}
.cog-icon:hover .inner-border{ display:block;}
.cog-icon .inner-con{
            margin-left: 57px;
    position: absolute;
    top: 82px;
    -webkit-transform: rotate(-47deg);
    -moz-transform: rotate(-47deg);
    -o-transform: rotate(-47deg);
    -ms-transform: rotate(-23deg);
    transform: rotate(38deg);
    display: none;
    color: #000;
    font-size: 20px;
    width: 100px;}
.cog-icon:hover .inner-con{ display:block;}

/* Last Icon end */


</style>
</head>

<body>
<div id="sidebar-wrapper">

                <div class="calender-div new-con">
                <a href="#"><div class="dasbord-icon-inner"></div>
                <div class="inner-border"></div>
                <div class="inner-con">Calander</div>
                </a>
                </div>

                <div class="time-icon new-con">
                    <a href="#">
                      <div class="dasbord-icon-inner"></div>
                      <div class="inner-border"></div>
                      <div class="inner-con">Alarm</div>

                    </a>
               </div>

               <div class="dashboard-icon new-con">
                <a href="#">
                <div class="dasbord-icon-inner"></div>
                <div class="inner-border"></div>
                <div class="inner-con">Dasbord</div>

                </a>
            </div>

             <div class="user-div new-con">
                <a href="#">
                <div class="dasbord-icon-inner"></div>
                <div class="inner-border"></div>
                <div class="inner-con">Uesr</div>
                </a>
            </div>

            <div class="cog-icon new-con">
                <a href="#">
                  <div class="dasbord-icon-inner"></div>
                  <div class="inner-border"></div>
                  <div class="inner-con">Last Icon</div>

                </a>
          </div>


</div>


</body>
</html>][1]][1]

【讨论】：

检查我上面的更新，但无论如何感谢@Hari Om Srivastava 的帮助
能否请您提供完整的 html 代码，以便我将更新中显示的完整代码发送给您。谢谢 :)
好的@Hari Om Srivastave
我已经更新了代码，请查看悬停效果
哇，非常感谢。非常感谢@Hari Om Srivastava

【解决方案2】：

这应该会有所帮助！ border-top-left-radius和border-top-right-radius应该是宽度的一半，使用transform旋转90度。

#sidebar-wrapper {
  background: red;
  position: fixed;
  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: 250px 250px 0 0;
  height: 400px;
  overflow: hidden;
  box-shadow: inset -1px 0px 100px 2px rgba(0, 0, 0, .4), 1px 0px 100px 1px rgba(255, 255, 255, .02);
  width: 500px;
  transform: rotate(90deg);
  left: -70px;
}

&lt;div id="sidebar-wrapper"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

嗨，请试试这个半圆形边框根据你增加高度和宽度

The html 

    <div></div>

CSS

div{
     height:90px;
     width:90px;
     border-radius: 0 90px 90px 0px;
     -moz-border-radius: 0 90px 90px 0px;
     -webkit-border-radius: 0 90px 90px 0;
     background:green;
}

【讨论】：