html - 底部的线性 flex 标题？

Question

很抱歉在这里重复这个类似于 SO 的问题:Can I create a div with a Curved bottom?

但是那里的方法并不能满足我对header的定制需求。但是什么i want to achieve与 what i've achieve 不太相似带有边框 border-bottom-left-radius 和 border-bottom-right-radius。

正如您所看到的图像，我想要实现的标题在整个底部呈线性 flex ，但我所实现的是我在标题的左侧和右侧部分有更多 flex 的边框并且 flex 不是线性的整个底部。走近后就直了。我尝试增加 %age，但它的边缘变得更加 flex 。

有没有其他方法可以让我在整个底部呈线性 flex ？

这是我的代码:CSS 代码:

header{     
        background-color: #000;
        border-bottom-left-radius:25%;
        border-bottom-right-radius:25%;
        padding: 10px;
        opacity: 0.35;
        position: fixed;
        width: 100%;
        z-index: 1000;
        }

这里是链接JSfiddle链接:https://jsfiddle.net/ozqneuha/

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

/* --Global CSS-- */

.header-container {
  margin: 0 auto;
  width: 1170px;
}
ul {
  padding: 0;
  margin: 0;
}
/* Header CSS*/

header {
  background-color: #000;
  border-bottom-left-radius: 25%;
  border-bottom-right-radius: 25%;
  padding: 10px;
  opacity: 0.35;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
header nav ul {
  list-style-type: none;
}
header .logo {
  display: inline-block;
}
header .header-nav {
  display: inline-block;
  float: right;
  padding: 7px;
}
header li {
  float: left;
  margin-left: 20px;
}
header li a {
  color: #fff;
  font: 600 16px'Open Sans';
  text-transform: uppercase;
  text-decoration: none;
}
header li a:hover,
header li a:active {
  color: #e51937;
  text-decoration: none;
}

<header>
  <div class="header-container">
    <div class="logo">
      <a href="#">
        <img src="http://i.imgur.com/2JbjOqY.png" alt="logo">
      </a>
    </div>

    <div class="header-nav">
      <nav>
        <ul>
          <li><a href="#">Search</a>
          </li>
          <li><a href="#">Map</a>
          </li>
          <li><a href="#">Properties</a>
          </li>
          <li><a href="#">Parking</a>
          </li>
          <li><a href="#">Residents</a>
          </li>
          <li><a href="#">Pay Online</a>
          </li>
        </ul>
      </nav>
    </div>
    <!-- /.header-nav -->
  </div>
  <!-- /.header-container -->
</header>

Answer 1

你可以试试 clip-path，但一定要检查浏览器支持。

Can I use CSS clip-path property

基本上，您只需使用椭圆来剪裁标题 div。

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600,700);

body {
  margin: 0;  
}

/* --Global CSS-- */
.header-container{
  margin: 0 auto;
  width: 1170px;
  text-align: right;
}

ul{
  padding: 0;
  margin:0;
}

/* Header CSS*/

header{
  background-color: #000;
  /*
  border-bottom-left-radius:25%;
  border-bottom-right-radius:25%;
  */
  padding: 10px;
  opacity: 0.35;
  position: fixed;
  width: 100%;
  z-index: 1000;
  min-height: 50px;
  -webkit-clip-path: ellipse(60% 100% at 50% 0%);
  clip-path: ellipse(60% 100% at 50% 0%);

}

header nav ul{
  list-style-type: none;	
}

header .logo {
  display: inline-block;
  float: left;
}

header .header-nav{
  display: inline-block;
  /*float: right;*/
  padding: 7px;
}

header li{
  float: left;
  margin-left: 20px;
}

header li a{
  color: #fff;
  font: 600 16px 'Open Sans';		
  text-transform: uppercase;
  text-decoration: none;
}	

header li a:hover,
header li a:active{
  color: #e51937;
  text-decoration: none;
}

@media screen and (max-width: 1169px) {
  .header-container {
    width: 840px;    
  }
  header .header-nav{
    display: inline-block;
  }
}

@media screen and (max-width: 996px) {
  .header-container {
    width: 100%;    
  }
  header .logo {
    float: none;
    display: block;
    text-align: center;
  }
  header .header-nav{
    display: none;
  }
}

<header>
  <div class="header-container">            
    <div class="logo">
      <a href="#">
        <img src="http://i.imgur.com/2JbjOqY.png" alt="logo" />
      </a>
    </div>

    <div class="header-nav">
      <nav>
        <ul>
          <li><a href="#">Search</a></li>
          <li><a href="#">Map</a></li>
          <li><a href="#">Properties</a></li>
          <li><a href="#">Parking</a></li>
          <li><a href="#">Residents</a></li>
          <li><a href="#">Pay Online</a></li>
        </ul>
      </nav>
    </div><!-- /.header-nav -->
  </div><!-- /.header-container -->
</header>