Re: Wrap-around ribbons with CSS

Post Preview

postName: ''
postComment: "Although you have done this as a ribbon, it's also possible to do this on a Wikidot top bar menu.\n\nribbon-half.jpg\n\nThis example is at http://vineyard.wikidot.com\n\nThe CSS is:\n\n[[code]]\n#top-bar:before, #top-bar:after {\n bottom: -24px;\n content: \"\";\n display: block;\n position: absolute;\n z-index: -10;\n}\n \n#top-bar:before {\n border-color: transparent #444 transparent transparent;\n border-style: solid;\n border-width: 0 22px 25px 0;\n height: 0;\n left: -1px;\n width: 0;\n}\n \n#top-bar:after {\n border-color: #444 transparent transparent;\n border-style: solid;\n border-width: 25px 22px 0 0;\n height: 0;\n right: -1px;\n width: 0;\n}\n[[/code]]"

rating: 0+x
This is the Redirect module that redirects the browser directly to the "http://snippets.wdfiles.com/local--code/code:url-title-with-slash-redirect/2#http://css3.wikidot.com/blog:wrap-around-ribbons-with-css" page.
Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.