Question

如何将div变成不规则形状？我正在尝试创建一个导航栏，其中包含此div的圆形中心的徽标。这是我想要做的：

我真的不知道从哪里开始，因为我从来没有做过任何不是矩形的div。 div的左侧将包含2个菜单项，右侧将包含3个菜单项，中心将包含我的圆形徽标。

Answer 1

您需要使用精确的身高和尺寸，但这可能会解决您的问题

＆＃13;

.menu {
  background: darkgray;  
  padding: 1rem 0;
  margin: 5rem;
  text-align: center
}

.menu::after {
  content: '';
  background: darkgray;  
  border-radius: 50%;
  padding: 5rem;
}

＆＃13;

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

＆＃13;

Answer 2

你可以尝试使用flexbox ......我不知道，也许你必须在它上面构建一点...但它可能

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

Answer 3

试试这个

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

请参阅此https://jsfiddle.net/9rtoqpjc/

Answer 4

如果您只是尝试塑造，那么您可以使用渐变。

＆＃13;

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

＆＃13;

<div></div>

＆＃13;

<强> Working Fiddle

Answer 5

首先你应该放心div的宽度css属性。我建议你看看这里：w3schools.com

无论如何，这是一个关于你可以开始工作的代码示例：

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>

Answer 6

试试这个

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

请参阅此https://jsfiddle.net/onn3b9z7/

Answer 7

您可以尝试在矩形div上的css文件中使用border-radius：70％，看看是否有效。

将div设为宽矩形，中间有一个圆圈

7 个答案: