before_css

css_transform_skew

HTML

<SCRIPT LANGUAGE="JavaScript">

function change(index)
　{
　index.style.borderStyle="inset";
　index.style.color="blue";
　}

function rechange(index)
　{
　index.style.borderStyle="outset";
　index.style.color="black";
　}

</SCRIPT>

<HTML>

<HEAD>
　<STYLE>
　 　SPAN {position:absolute;border:outset 3px;
　 　 　 　 　width:80px;height:22px;cursor:hand;text-align:center;
　 　 　 　 　font-size:18px;color:black;font-family:Arial}
　 　</STYLE>
</HEAD>
<BODY>
　<SPAN STYLE="top:5px;left:5px" onMouseOver=change(this)
　 　onMouseOut=rechange(this)>HTML</SPAN>
　<SPAN STYLE="top:35px;left:5px" onMouseOver=change(this)
　 　onMouseOut=rechange(this)>CSS</SPAN>
　<SPAN STYLE="top:65px;left:5px" onMouseOver=change(this)
　 　onMouseOut=rechange(this)>JScript</SPAN>
　<SPAN STYLE="top:95px;left:5px" onMouseOver=change(this)
　 　onMouseOut=rechange(this)>Java</SPAN>
　<SPAN STYLE="top:125px;left:5px" onMouseOver=change(this)
　 　onMouseOut=rechange(this)>CGI</SPAN>
　<SPAN STYLE="top:155px;left:5px" onMouseOver=change(this)
　 　onMouseOut=rechange(this)>ASP</SPAN>
</BODY>
</HTML>

CSS

body{ font-size:18px; color:#FFF; }
a { color:#FFF}
.classname 
{ 
    border:solid 1px #2d2d2d;  
    text-align:center; 
    background:#575757; 
    padding:100px 50px 100px 50px;  
    -moz-border-radius: 5px;  
    -webkit-border-radius: 5px; 
    border-radius: 5px;
    transform:skew(20deg);
    -webkit-transform:skew(20deg);
    -moz-transform:skew(20deg);
    -o-transform:skew(20deg);
    -ms-transform:skew(20deg);
}

JavaScript

function change(index)
　{
　index.style.borderStyle="inset";
　index.style.color="blue";
　}

function rechange(index)
　{
　index.style.borderStyle="outset";
　index.style.color="black";
　}