Dodawanie zaokrąglonych narożników do paska nawigacji CSS - html, css

Mam nav na pasku na mojej stronie, ale chcę umieścić zaokrąglone rogi na każdym jego końcu. Do tej pory moim css na to jest ...

#nav {
left:40px;
position:relative;
top:140px;
}
#nav a {
background-image:url(../images/menu.png);
background-repeat:no-repeat;
color:#FFFFFF;
display:inline;
float:left;
font-family:Arial,Helvetica,sans-serif;
font-size:17px;
font-weight:bolder;
height:44px;
padding-top:12px;
text-align:center;
text-decoration:none;
width:134px;
}
#nav a:hover {
background-image:url(../images/menu_ro.png);
background-repeat:no-repeat;
}

i mój HTML ..

<div id="nav">
<a href="">Home</a>
<a href="">Food</a>
<a href=""</a>
<a href=""</a>
<a href=""</a>
<a href=""></a>
<a href=""</a>
</div>

Mam zaokrąglone rogi, aby umieścić na każdym z końców zwanychmenu_l.png i menu_r.png. Nie mogę dowiedzieć się, jak umieścić je na obu końcach nav.Moje próby do tej pory wydają się być ignorowane przez przeglądarki.Jak każdy ma najlepszą metodę, aby to osiągnąć? Próbuję uniknąć tabel.

Twoje zdrowie

Odpowiedzi:

1 dla odpowiedzi № 1

Spróbuj dodać div na początku #navi na końcu.

<div id="nav">
<div id="nav-left"></div>
//anchor tags
<div id="nav-right"></div>
</div>

następnie zrób to dla CSS: (zakładając, że twój zaokrąglony obraz rogu ma szerokość 15 pikseli)

#nav {
padding: 0 15px;
}
#nav-left, #nav-right {
float: left;
height: 15px;
width: 15px;
}

Następnie zastosuj zaokrąglony narożnik obrazu.

---

0 dla odpowiedzi nr 2

Prostym sposobem na to w niektórych nowoczesnych przeglądarkach jest dodanie czegoś takiego jak:

-moz-border-radius: 8px; -webkit-border-radius: 8px;

który będzie obsługiwał przeglądarki oparte na mozilli i safari (oparte na webkitach).

Niestety, IE jest bardziej skomplikowany.

---

0 dla odpowiedzi № 3

Możesz ustawić lewe tło na pierwszym łączu i prawe tło na elemencie #nav.

Możesz także ustawić lewą bg na #nav i prawo na #nav za pomocą selektora treści ::after.

---