SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    draw ribbon style ends w/css

    Hello all. Perhaps you folks can correct me on what I am doing wrong?
    this is what I have in html
    HTML Code:
    <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

    Code:
    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. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,731
    Mentioned
    31 Post(s)
    Tagged
    0 Thread(s)
    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..


    Code:
    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
    Code:
    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. #3
    SitePoint Guru
    Join Date
    Oct 2010
    Location
    Portland, Or
    Posts
    634
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Thank you Dresden will go try it out.
    D


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •