html – 底部线性弯曲的标题？

概述很抱歉重复此问题类似于SO： Can I create a div with a Curved bottom? 但是那里的方法不能满足我对标头的定制需求. 但0700与边界边界左下半径和边界右下半径的what i’ve achieve并不完全相似. 正如你所看到的那样,我想要实现的标题在整个底部是线性弯曲的,但我所取得的是我在标题的左右两侧有更多弯曲的边框,弯曲在整个底部不是线性的.短距离后变得笔 很抱歉重复此问题类似于SO： Can I create a div with a Curved bottom?

但是那里的方法不能满足我对标头的定制需求.
但0700与边界边界左下半径和边界右下半径的what i’ve achieve并不完全相似.

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

有没有其他方法这样做,以便我在整个底部线性弯曲？

这是我的代码：
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 >    <div >      <a href="#">        <img src="http://i.imgur.com/2JbjOqY.png" alt="logo">      </a>    </div>    <div >      <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>

解决方法 您可以尝试使用clip-path,但请务必检查浏览器支持.

Can I use CSS clip-path property

你基本上只是使用椭圆来剪辑你的标题div.

@import url(https://Fonts.GoogleAPIs.com/CSS?family=Open+Sans:400,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 >                <div >      <a href="#">        <img src="http://i.imgur.com/2JbjOqY.png" alt="logo" />      </a>    </div>    <div >      <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>

总结

以上是内存溢出为你收集整理的html – 底部线性弯曲的标题？全部内容，希望文章能够帮你解决html – 底部线性弯曲的标题？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。