半圈CSS

Question

有什么方法可以解决这个问题吗？我尝试更改border-radius值和很多搜索只是为了实现下图中的设计。我想我会想念一些人可以指出我的风格有什么问题。

这是代码。

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

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

Answer 1

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

SELECT count(distinct <attribute1>)
FROM <table_name1>
WHERE <attribute1> IS NOT (SELECT <attribute1>
                           FROM <table_name2>);

Answer 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;
}

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

Answer 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;
}