<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Triangle using the border attribute of CSS </title>
<Style type = "text/CSS">
<! --
. Box {width: 300px; Height: 300px; Background: # CCC; position: relative; top: 100px; left: 100px}
. To-top {display: block; overflow: hidden; width: 0px; Height: 0px; Border: 6px solid # CCC; border-color: # CCC # FFF; border-width: 0 6px 6px; position: absolute; left: 30px; top: 0; margin-top:-6px ;}
. To-right {display: block; overflow: hidden; width: 0px; Height: 0px; Border: 6px solid # CCC; border-color: # fff # CCC; border-width: 6px 0 6px 6px; position: absolute; Right: 0px; top: 30px; margin-Right:-6px ;}
. To-bottom {display: block; overflow: hidden; width: 0px; Height: 0px; Border: 6px solid # CCC; border-color: # CCC # FFF; border-width: 6px 6px 0 6px; position: absolute; Right: 30px; bottom: 0; margin-bottom:-6px ;}
. To-left {display: block; overflow: hidden; width: 0px; Height: 0px; Border: 6px solid # CCC; border-color: # fff # CCC; border-width: 6px 6px 6px 0; position: absolute; left: 0; bottom: 30px; margin-left:-6px ;}
-->
</Style>
</Head>
<Body>
<Div class = "box"> <em class = "to-top"> </em> <em class = "to-right"> </em> <em class = "To-bottom"> </em> <em class = "to-left"> </em> </div>
</Body>
</Html>
