линейно изогнутый заголовок внизу?

Извините, что повторил этот вопрос, подобный SO здесь: Can I create a div with a Curved bottom?линейно изогнутый заголовок внизу?

Но метод там не соответствует моей потребности в настройке заголовка. Но что i want to achieve не очень похож на what i've achieve с линией border-bottom-left-radius и border-bottom-right-radius.

Как вы можете видеть изображения, которые я хочу достичь, линейно изогнуты по всему дну, но с тем, что я достиг, это то, что у меня есть более изогнутая граница в левой и правой части заголовка и изогнута линейный по всему дну. Он становится прямым после короткого расстояния. Я пытался увеличить% возраста, но он становится еще более изогнутым по краям.

Есть ли другой способ сделать это, чтобы я получил линейную изогнутость по всему дну?

Вот мой код: 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>

источник

2015-08-12 vikrantnegi007

Вы можете разместить полный код, чтобы воспроизвести проблему? –

вы пробовали 'border-radius: 100%' или '50%' ??? –

Добавлена ссылка Jsfiddle. – vikrantnegi007

Я наконец понял из решения этой проблемы. Я использовал pesudo class :before для решения.

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

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

источник

2015-08-17 04:42:09 vikrantnegi007

Вы можете попробовать этот путь?

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

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

источник

2015-08-12 10:22:42

Уже пробовал, но это слишком много соблазнительно, чем нужно. – vikrantnegi007

Можете ли вы нарисовать и дать, как он должен появиться? –

Я уже добавил изображение того, чего хочу достичь в сообщении. Здесь http://i.imgur.com/iv6AuNf.png – vikrantnegi007

Это, как я это сделал:

.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

Adjust процент в width, left и top по своему вкусу :)

источник

2015-08-12 10:39:59

Попробуйте, но не забудьте проверить поддержку браузера.

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

 
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'; \t \t 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
} \t 
 

 
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>

источник

2015-08-12 12:46:33 DavidDomain

линейно изогнутый заголовок внизу?

ответ

Смежные вопросы