Как добавить пользовательскую строку в панель навигации в CSS

Question

в настоящее время пытается добавить прохладный дизайн линию, как

http://forrester-park.co.uk/wp-content/uploads/2014/05/Fancy-line.png

в нижнюю части моей пользовательской панели навигации. Как бы добавить что-то подобное? Есть ли, чтобы добавить его в css панели навигации, а не потянуть его в качестве изображения? Что-то вроде http://jsfiddle.net/henry12345/6h3Lee0e/

в основном здесь:

width:auto 
border-top:1 px solid #000000; 
border-radius:3px; 

Answer 1

вы можете сделать что-то вроде

background:url('image_url'); 
background-repeat: no-repeat; 
background-position: bottom center; 
padding-bottom: 10px; 
margin: 10px 0px 10px 0px; 

или использовать границы изображения (http://caniuse.com/#feat=border-image IE может быть isssue), если вы можете предоставить ваш HTML/stles в скрипке - может предложить решение

Answer 2

Попробуйте комбинацию горизонтального правила и шрифта - удивительный. Измените значок в середине так, как хотите.

hr { 
 
    border: 0; 
 
    height: 2px; 
 
    margin:18px 0; 
 
    position:relative; 
 
    background: -moz-linear-gradient(left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0.65) 50%, rgba(0,0,0,0) 90%, rgba(0,0,0,0) 100%); /* FF3.6+ */ 
 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(0,0,0,0)), color-stop(10%,rgba(0,0,0,0)), color-stop(50%,rgba(0,0,0,0.65)), color-stop(90%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */ 
 
    background: -webkit-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */ 
 
    background: -o-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */ 
 
    background: -ms-linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* IE10+ */ 
 
    background: linear-gradient(left, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0.65) 50%,rgba(0,0,0,0) 90%,rgba(0,0,0,0) 100%); /* W3C */ 
 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#00000000',GradientType=1); /* IE6-9 */ 
 
    margin-top: 60px; 
 
} 
 

 
hr:before { 
 
    content: ""; 
 
    display: block; 
 
    border-top: solid 1px #f9f9f9; 
 
    width: 100%; 
 
    height: 1px; 
 
    position: relative; 
 
    top: 50%; 
 
    z-index: 1; 
 
} 
 

 
hr:after { 
 
    content: "\f1ce"; 
 
    position: absolute; 
 
    font-family: fontAwesome; 
 
    width: 30px; 
 
    text-align: center; 
 
    top: -8px; 
 
    left: 48%; 
 
    z-index: 99999999; 
 
    background-color: white; 
 
    color: #666; 
 
    
 
    
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 

 
<hr>

Answer 3

<div> с: после того, как собственность

Я не знаю, как ваша навигационная панель выглядит, но вы можете получить желаемый эффект, добавив :after свойство в меню <div> ,

Вот пример, используя изображение:

.menu { 
 
    position: relative; 
 
} 
 

 
.menu:after { 
 
    content: url(http://forrester-park.co.uk/wp-content/uploads/2014/05/Fancy-line.png); 
 
    display: block; 
 
    background: white; 
 

 
    position: absolute; 
 
}

<div class="menu"> 
 
    <h1>Some Title</h1> 
 
<ul> 
 
    <li>Menu item 1</li> 
 
    <li>Menu item 2</li> 
 
    <li>Menu item 3</li> 
 
    <li>Menu item 4</li> 
 
</ul>  
 
</div>

jsfiddle with the same content to play around