/ Published in: CSS
Expand |
Embed | Plain Text
Copy this code and paste it in your HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>google analytics buttons</title> <style type="text/css"> /* default stuff */ body {padding:20px; font-family:arial; text-align:center;} p, li {font-size: 12px; line-height:18px;} h3 {margin-bottom:6px;} .examplesGoHere {text-align:left; margin:0 auto; } .letsGiveItAFixedWidthOf200Pixels { width:200px; } ul {list-style:none;margin-left:0;padding-left:0;margin-top:0;} ul li {margin-bottom:8px; margin-left:0;padding-left:0; } /* notched effect for links in the unordered list */ .notchedListItems a { display:block; border: solid #666; border-width: 0 1px; text-decoration: none; outline:none; color: #000; background: #e4e4e4; } .notchedListItems a b { display: block; position:relative; top: -1px; left: 0; border:solid #666; border-width:1px 0 0; font-weight:normal; } .notchedListItems a b b { border-width:0 0 1px; top: 2px; padding:1px 6px; } .notchedListItems a:hover, .notchedListItems a:hover b {background:#666;color:white;} .feature { border:solid #647aae; border-width:0 1px; background:#b0c0e6; } .feature div { position:relative; top: -1px; left: 0; border:solid #647aae; border-width:1px 0 0; } .feature div div { top: 2px; border-width:0 0 1px; padding: .3em .3em .1em; } </style> </head> <body> <div class="examplesGoHere letsGiveItAFixedWidthOf200Pixels"> <h3>A list</h3> <ul class="notchedListItems"> <li><a href="#"><b><b>About</b></b></a></li> <li><a href="#"><b><b>Contact</b></b></a></li> <li><a href="#"><b><b>Buy Pie</b></b></a></li> </ul> <h3>A div</h3> <div class="feature"> <div> <div> <p>This is an example of the notched corners as applied to a div container.</p> <p>This is an example of the notched corners as applied to a div container.</p> <p>This is an example of the notched corners as applied to a div container.</p> </div> </div> </div> </div><!-- end .examplesGoHere --> </body> </html>
URL: http://www.askthecssguy.com/examples/notchedcorners/index.html