How can I make a div in to an irregular shape? I am trying to create a navigation bar that contains the logo in the center of the circular shape of this div. Here is what I am trying to make:

I really don't know where to start since I have never had to make any divs that aren't rectangular. The left of the div will contain 2 menu items, the right will contain 3 menu items and the center will contain my circular logo.

How can I make a div in to an irregular shape? I am trying to create a navigation bar that contains the logo in the center of the circular shape of this div. Here is what I am trying to make:

I really don't know where to start since I have never had to make any divs that aren't rectangular. The left of the div will contain 2 menu items, the right will contain 3 menu items and the center will contain my circular logo.

• javascript
• jquery
• html
• css

Share Improve this question Follow asked Jul 9, 2016 at 7:42 Alexiz HernandezAlexiz Hernandez 35922 gold badges33 silver badges1313 bronze badges 4

• create 2 div tags rectangle and circle – Madhawa Priyashantha Commented Jul 9, 2016 at 7:45
• Possible duplicate of Can I make an irregular <div> shape using only CSS? – Kiran RS Commented Jul 9, 2016 at 7:45
• Here is a similiar queston on stackO Link – A. Ilazi Commented Jul 9, 2016 at 7:46
• will you fill some content in it? – Mr_Green Commented Jul 9, 2016 at 7:53

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 5

You will need to play with exact height and size, but this is a possible take on your problem

.menu {
  background: darkgray;  
  padding: 1rem 0;
  margin: 5rem;
  text-align: center
}

.menu::after {
  content: '';
  background: darkgray;  
  border-radius: 50%;
  padding: 5rem;
}

<nav class="menu"></nav>

You can try it with flexbox... I don't know, perhaps you have to build a little bit on it...but it's possible

.nav {
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: center;
  background-color: grey;
  margin-top: 100px;
}
.logoContent {
  height: 130px;
  width: 130px;
  border-radius: 130px;
  background-color: grey;
  margin-top: -50px;
}

<div class="nav">
  <div class="logoContent"></div>
</div>

try this

html

<div id="rect">
<div id="cir">
</div>
</div>

css

#rect {
width: 500px;
height: 50px;
background: green;
margin: 100px;
}
#cir {
width:150px;
height: 150px;
background: green;
border-radius: 100%;
margin: 0 auto;
position: relative;
top: -50px;
 }

see this https://jsfiddle/9rtoqpjc/

If you just trying for shape, then you can use gradients.

div{
  width: 400px;
  height: 100px;
  color: #333;
  background-image: radial-gradient(circle, currentColor 50px, transparent 0), 
                    linear-gradient(transparent 30%, currentColor 30%, currentColor 70%, transparent 60%);
}

<div></div>

Working Fiddle

You should first of all get in confidence width css properties of div. I suggest you to look here: w3schools.

Anyway this is an example of code on what you can start working:

div{
        background-color: gray;
      }
      #rectangle{
        margin-top: 100px;
        width: 500px;
        height: 40px;
      }
      #circle{
        position: relative;
        width: 200px; /*  radiant*2   */
        height: 200px; /*  radiant*2   */
        border-radius: 50%;
        left: 150px; /* rectangle_width/2 - radiant */
        top: -80px;  /* rectangle_height/2 - radiant */
      }
      #logo{
        position: relative;
        top: 36px; /* radiant - img_heigth/2 */
        left: 36px; /* radiant - img_width/2 */
      }

<div id="rectangle">
      <div id="circle">
        <img id="logo" src="http://findicons./files/icons/1070/software/128/mozilla_firefox.png" /> <!-- 128*128 -->
      </div>
    </div>

try this

html

    <div class="header-area">
  <div class="header-main">
    <div class="menu-left">
      <ul>
        <li class="menu-1"><a href="#">Menu 1</a></li>
        <li class="menu-2"><a href="#">Menu 2</a></li>
      </ul>
    </div>
    <div class="logo">
      <img src="#" />
    </div>
    <div class="menu-right">
      <ul>
        <li class="menu-1"><a href="#">Menu 1</a></li>
        <li class="menu-2"><a href="#">Menu 2</a></li>
        <li class="menu-3"><a href="#">Menu 3</a></li>
      </ul>
    </div>
  </div>
</div>

css

    .header-area {
  width: 100%;
  margin: 34px 0px;
}

.header-main {
  width: 100%;
  height: 60px;
  position: relative;
  background-color: #272727;
}

.menu-left {
  width: 40%;
  float: left;
}

.logo img {
  width: 100%;
  position: relative;
  top: 38px;
  vertical-align: middle;
}

.header-main ul li {
  display: inline-block;
  padding: 5px;
  text-align: center;
}

.header-main ul li a {
  color: #fff;
}

.logo {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #272727;
  color: #fff;
  margin-left: auto;
  margin-right: auto;
  top: -27px;
  float: left;
}

.menu-right {
  width: 40%;
  float: left;
}

see this https://jsfiddle/onn3b9z7/

You can try and use border-radius: 70% in your css file on a rectangular div and see if that works.