斜めメニュー

CSS3で斜めメニュー。IE8以上。

by FiNGAHOLiC

HTML

<ul>
    <li><a href="#menu1"><span><img src="http://placehold.it/100x20"></span></a></li>
    <li><a href="#menu2"><span><img src="http://placehold.it/100x20"></span></a></li>
    <li><a href="#menu3"><span><img src="http://placehold.it/100x20"></span></a></li>
    <li><a href="#menu4"><span><img src="http://placehold.it/100x20"></span></a></li>
</ul>

CSS

ul{
    padding-left:45px;
    overflow:hidden;
}

li{
    margin-right:5px;
    float:left;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -ms-transform-origin:0 0;
    -o-transform-origin:0 0;
    transform-origin:0 0;
    -webkit-transform:skew(-45deg);
    -moz-transform:skew(-45deg);
    -ms-transform:skew(-45deg);
    -o-transform:skew(-45deg);
    transform:skew(-45deg);
    /* http://www.useragentman.com/IETransformsTranslator/ */
    -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=-0.9999999999999977, M21=0, M22=1, SizingMethod='auto expand')";
    background: #0040ba;
    background: -moz-linear-gradient(top,  #0040ba 0%, #081c4f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0040ba), color-stop(100%,#081c4f));
    background: -webkit-linear-gradient(top,  #0040ba 0%,#081c4f 100%);
    background: -o-linear-gradient(top,  #0040ba 0%,#081c4f 100%);
    background: -ms-linear-gradient(top,  #0040ba 0%,#081c4f 100%);
    background: linear-gradient(to bottom,  #0040ba 0%,#081c4f 100%);
    zoom:1;
}

a:link,
a:visited,
a:hover,
a:active{
    padding:10px 20px;
    border-top:4px solid #1e76d8;
    border-left:3px solid #1e76d8;
    display:block;
    color:#fff;
    text-decoration:none;
    zoom:1;
}

a:hover{
    border-top:4px solid #43a5e6;
    border-left:3px solid #43a5e6;
    background: #0086ce;
    background: -moz-linear-gradient(top,  #0086ce 0%, #0d5477 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0086ce), color-stop(100%,#0d5477));
    background: -webkit-linear-gradient(top,  #0086ce 0%,#0d5477 100%);
    background: -o-linear-gradient(top,  #0086ce 0%,#0d5477 100%);
    background: -ms-linear-gradient(top,  #0086ce 0%,#0d5477 100%);
    background: linear-gradient(to bottom,  #0086ce 0%,#0d5477 100%);
}

a span{
    margin-top:-2px;
    margin-left:20px\9;
    margin-right:-20px\9;
    *margin-left:0;
    *margin-right:0;
  ...