Draw ribbon style ends w/css

HTML & CSS
1

Hello all. Perhaps you folks can correct me on what I am doing wrong?
this is what I have in html

<nav>
<ul>
<li><a href="#">stuff  <span></span> </a></li>
<li><a href="#">about <span></span> </a></li>
<li><a href="#">contact <span></span> </a> </li>
<li><a href="#">more stuff <span></span> </a></li>
</ul>
</nav> <!-- nav -->

this is my css


nav {
margin:0 0 0 -50px;
text-transform:uppercase;
}
nav ul {list-style: none;}

nav ul li a{
display: block;
padding: 10px 10px 10px 20px;
color: #fff;
font-size:16px;
text-decoration:none;
background-color:#ccc;
margin: 0 0 5px 0 ;
line-height:25px;
position:relative;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
}

nav ul li a span{
position: absolute;
right: 100%;
top: 10px;
width:50px;
height: 100%;
background-color:#ddd;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
border-left:2px solid #666600;
background-image:url(./adminImages/shadowPng.png);
background-position:top right;
background-repeat: repeat-y;
}

nav ul li a span::before{
position: absolute;
right: 100%;
top: 10px;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #fff;
}
nav ul li:nth-child(2) a, nav ul li:nth-child(2) a span {background-color:#520000;}
nav ul li:nth-child(3) a, nav ul li:nth-child(3) a span {background-color:#661400;}
nav ul li:nth-child(4) a, nav ul li:nth-child(4) a span {background-color:#000;}
nav ul li:nth-child(5) a, nav ul li:nth-child(5) a span {background-color:#333;}

I wanted the ribbon style effect on the span’s tails.
thank you
D

2

Well for one, you forgot content:“”; also your positioning is backwards (right:100% positions the element on the OUTSIDE LEFT of the parent).
also adding the border to the SPAN doesn’t create a triangle…


nav ul li a{
display: block;
padding: 10px 10px 10px 20px;
color: #fff;
font-size:16px;
text-decoration:none;
background-color:#ccc;
margin: 0 0 5px 0 ;
line-height:25px;
position:relative;
border-top: 2px solid #666600;
border-bottom: 2px solid #666600;
}

nav ul li a span{
position: absolute;
right: 0;
top: 0;
width:50px;
bottom:0; 
background-color:#ddd;
background-image:url(./adminImages/shadowPng.png);
background-position:top right;
background-repeat: repeat-y;
}

nav ul li a span:before{
position: absolute;
right:0;
top: 0;
width: 0; 
height: 0; 
border-bottom: 23px solid transparent;
border-right: 23px solid #fff;
border-top: 23px solid transparent;
content:"";
z-index:10;
}
nav ul li a span:after{
position: absolute;
right:2px;
top: 0;
width: 0; 
height: 0; 
border-bottom: 23px solid transparent;
border-right: 23px solid #666600;
border-top: 23px solid transparent;
content:"";
}

OR


nav ul li a span{
position: absolute;
right: -0;
top:  0;
 background-image:url(./adminImages/shadowPng.png);
background-position:top right;
background-repeat: repeat-y;
border-bottom: 23px solid transparent;
border-right: 23px solid #666600;
border-top: 23px solid transparent;

}
nav ul li a span:before{
position: absolute;
right:-23px;
top: -21px;
width: 0; 
height: 0; 
border-bottom: 21px solid transparent;
border-right: 21px solid  #ff;
border-top: 21px solid transparent;
content:"";

}

hope that helps

3

Thank you Dresden will go try it out.
D