半圆形CSS

3

有没有解决这个问题的方法?我尝试更改边框半径值并进行了大量搜索,只为实现下面图像中的设计。我认为我错过了一些东西,有人能指出我的样式有什么问题吗?

以下是代码:

 #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% - Saurabh Srivastava
我之前试过了。 - Poldo
你能提供一个带有工作示例的fiddle吗? - Denis Sheremet
3个回答

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的帮助。 - Poldo
请问您能否提供完整的HTML代码,这样我就可以将完整的代码发送给您,如更新所示。谢谢 :) - Hari Om Srivastava
好的 @Hari Om Srivastave - Poldo
我已经更新了代码,请使用悬停效果检查。 - Hari Om Srivastava
非常感激。非常感谢@Hari Om Srivastava。 - Poldo

0

这应该会有所帮助!border-top-left-radiusborder-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>


0

嗨,请尝试使用这个半圆边框,根据需要增加高度和宽度。

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接