CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alexiz Hernandez
Alexiz Hernandez

Reputation: 359

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

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:

enter image description here

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.

Upvotes: 3

Views: 1955

Answers (7)

user2572661
user2572661

Reputation: 132

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/

Upvotes: 0

Donato Pellegrino
Donato Pellegrino

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

Upvotes: 0

user5373973
user5373973

Reputation:

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/

Upvotes: 1

Mr_Green
Mr_Green

Reputation: 41872

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

Upvotes: 0

webta.st.ic
webta.st.ic

Reputation: 5179

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>

Upvotes: 1

Oz Lodriguez
Oz Lodriguez

Reputation: 973

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>

Upvotes: 5

Bhimesh Chauhan
Bhimesh Chauhan

Reputation: 130

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

Upvotes: -2

Related Questions