Make a div a wide rectangle with a circle in the middle

Question

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.

Possible duplicate of [Can I make an irregular
shape using only CSS?](http://stackoverflow.com/questions/21687326/can-i-make-an-irregular-div-shape-using-only-css) — Kiran RS, Jul 09 '16 at 07:45
Here is a similiar queston on stackO [Link](http://stackoverflow.com/questions/4840736/easier-way-to-create-circle-div-than-using-an-image) — A. Ilazi, Jul 09 '16 at 07:46

score 5 · Answer 1 · answered Jul 09 '16 at 07:48

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>

answered Jul 09 '16 at 07:48

Oz Lodriguez

965
5
16

may as well just apply your circle to the third menu item though @OzLodriguez. – Carol McKay Jul 09 '16 at 07:52
Hmm, so true. Learn something every day @OzLodriguez – Carol McKay Jul 09 '16 at 07:56
@CarolMcKay That could work. But if you strip down the design the circle is nothing more than a visual aid. So basically that entails it should not be in the DOM as a semantic purpose but as a cosmetic one. So it's better to put it into a pseudo element, this way this class is easily reproducible as well without having extra html content rendering on the page – Oz Lodriguez Jul 09 '16 at 07:57

webta.st.ic · Answer 2 · 2016-07-09T07:55:34.847

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>

score 1 · Answer 3 · 2016-07-09T08:02:49.857

1

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.net/9rtoqpjc/

edited Jul 09 '16 at 08:02

answered Jul 09 '16 at 07:53

score 0 · Answer 4 · answered Jul 09 '16 at 07:58

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

score 0 · Answer 5 · answered Jul 09 '16 at 08:18

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

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.com/files/icons/1070/software/128/mozilla_firefox.png" /> <!-- 128*128 -->
      </div>
    </div>

score 0 · Answer 6 · answered Jul 09 '16 at 08:46

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.net/onn3b9z7/

score -2 · Answer 7 · answered Jul 09 '16 at 07:46

-2

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

answered Jul 09 '16 at 07:46

Bhimesh Chauhan

80
1
11

1

This must be a comment. – Kiran RS Jul 09 '16 at 07:49
1

cant really add comment without 50 reputation. Can I? Apologies for inconvenience. – Bhimesh Chauhan Jul 09 '16 at 07:54

Make a div a wide rectangle with a circle in the middle

7 Answers7