底部是线性弯曲的标题？

时间：2015-08-12 09:42:42

标签： html css html5 css3 twitter-bootstrap-3

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

但是那里的方法不能满足我对标头的定制需求。 但i want to achieve与border-bottom-left-radius和border-bottom-right-radius的{​​{3}}不太相似。

正如你所看到的那样，我希望实现的标题在整个底部呈线性弯曲，但我所取得的成就是我在标题的左右两侧有更多弯曲的边框而且曲线不是线性的整个底部。短距离后变得笔直。我试图增加％年龄，但它在边缘变得更加弯曲。

还有其他方法可以让我在整个底部呈线性弯曲吗？

这是我的代码： 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链接：what i've achieve 

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

4 个答案:

答案 0 :(得分：2)

您可以尝试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>

答案 1 :(得分：1)

你能这样试试吗？

＆＃13;
＆＃13; 
@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: 50%;
  border-bottom-right-radius: 50%;
  padding: 10px 10px 35px;
  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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：1)

我就这样做了：

.overlay {
    position: absolute;
    z-index: -1;
    height: 100%;
    border-radius: 50%;
    width: 150%;
    left: -25%;
    top: -60%;
    background: rgba(121, 121, 121, 0.8);
    pointer-events:none;
}

Here is the JSFiddle demo

根据自己的喜好调整width，left和top百分比：）

答案 3 :(得分：1)

我终于找到了解决这个问题的方法。我已经使用了pesudo类:before来解决问题。

＆＃13;
＆＃13; 
/* --Global CSS-- */

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

header {
  padding: 10px;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
header:before {
  background-color: rgba(0, 0, 0, 0.35);
  width: 150%;
  content: '';
  height: 150px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  top: -76px;
  position: absolute;
  z-index: -1;
  margin-left: -25%;
}
header ul {
  list-style-type: none;
}
header .logo {
  display: table-cell;
  vertical-align: middle;
}
header .header-nav {
  display: table-cell;
  float: right;
  padding: 7px;
  vertical-align: middle;
}
header li {
  display: inline-block;
}
header li a {
  color: #fff;
  font: 600 16px'Open Sans';
  padding: 0 15px 0 15px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s;
}
header li a:hover,
header li a:active {
  color: #e51937;
  text-decoration: none;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题