Inverse rounded corners on menu. How to css3?

HTML & CSS
1

I designed a navigation menu which looks like the image here:

I want to code it with css3 rounded corners and box-shadows, not using any images. Problem is the rounded corner to the left of the first menu-item, and the one to the right of the menu… I call it a “inverse” rounded corner…

It should have to change color on :hover.

Is there any way to get this done in css only? And how?

Thanks a lot!

Greetings

2

Like this? http://www.sitepoint.com/forums/showthread.php?759389-css-test-your-css-skills-number-38-round-tabs

3

Yes, almost like that!
Almost, because the grey corners before and after have to be transparant because of a background picture…

Any ideas?

4

Try it see how it works. Looks like it would fly.

5

Yes, I agree with Eric: that tutorial will do what you want. :slight_smile:

6

I’m afraid the methods in the quiz won’t work for transparent background behind the inverse corners. However if you use borders and clip instead of a background colour you can achieve transparent inverse corners to some degree.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style>
body { background:#ccc }
ul {
	float:left;
	border-top:5px solid #a4a16c;
	padding:0 50px;
	margin:0;
	list-style:none;
}
li {
	border-radius:0 0 15px 15px;
	float:left;
	padding:0 30px;
	background:#a4a16c;
	height:50px;
	line-height:50px;
	color:#fff;
	position:relative;
	border-top:5px solid #a4a16c;
	margin-top:-5px;
}
a, a:visited {
	color:#fff;
	text-decoration:none
}
li:last-child:after {
	content:" ";
	border-radius:15px;
	background:transparent;
	border:5px solid #a4a16c;
	height:15px;
	position:absolute;
	width:50px;
	top:-5px;
	right:-54px;
	overflow:hidden;
	clip: rect(0px, 15px, 10px, 0px);
}
li:last-child:before {
	content:" ";
	position:absolute;
	top:-5px;
	right:-5px;
	height:5px;
	background:#a4a16c;
	width:5px;
}
li:first-child:after {
	content:" ";
	position:absolute;
	top:-5px;
	left:-5px;
	height:5px;
	background:#a4a16c;
	width:5px;
}
li:first-child:before {
	content:" ";
	border-radius:15px;
	background:transparent;
	border:5px solid #a4a16c;
	height:15px;
	position:absolute;
	width:50px;
	top:-5px;
	left:-54px;
	overflow:hidden;
	clip: rect(0px, 60px, 10px, 45px);
}
li:first-child:hover:before, li:last-child:hover:after { border-color:#000 }
li:first-child:hover:after, li:last-child:hover:before { background-color:#000 }
li:hover {
	background:#000;
	border-color:#000;
}
</style>
</head>

<body>

		<ul>
				<li><a href="#">test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">Test</a></li>
				<li><a href="#">test</a></li>
		</ul>

</body>
</html>

It uses a border rounded with a radius and then clipped to show only the corner. It’s a bit convoluted and not that flexible but can be done.

7

Ah Paul, that’s brilliant. A fascinating example to study in detail. :slight_smile: (Apologies bramfranken for my misinformed comment above, too.)

8

Awesome Paul!
Thanks a lot! U are a lifesaver! :smiley: