Half Circle CSS

Question

Is there any way how to solve this problem? I tried changing border-radius value and lot of searching just to achieve the design in the image below. I think i miss something can anyone point out what is wrong in my styles.

Here is the code.

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

Here is my HTML CODE

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

I want to achieve something like this but i can't customize the border.

Use this code : `#wrapper.toggled #sidebar-wrapper { width: 400px; }` and also use `border-radius: 50%` only — Saurabh Srivastava, Oct 06 '16 at 05:37
Possible duplicate of [Draw half circle with CSS or SVG](http://stackoverflow.com/questions/27682973/draw-half-circle-with-css-or-svg) — Kunj, Oct 06 '16 at 05:54

Hari Om Srivastava · Accepted Answer · 2016-10-06T11:10:02.347

This is my full code with hover effect

[![<!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]

Check my updates above but anyway thanks for the help @Hari Om Srivastava — Poldo, Oct 06 '16 at 05:57
can you please provide me full html code so that I will send you full code as show in update.Thanks :) — Hari Om Srivastava, Oct 06 '16 at 06:18

Pranesh Ravi · Answer 2 · 2016-10-06T05:41:04.683

This should help! border-top-left-radius and border-top-right-radius should be half of the width and use transform to rotate 90deg.

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

score 0 · Answer 3 · answered Oct 06 '16 at 07:28

hi please try this for half circle border increase height and width according you

The html 

    <div></div>

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

Half Circle CSS

I want to achieve something like this but i can't customize the border.

3 Answers3