[mohammad a]

HTML

کد [انتخاب] Expand

<div id=magento class="canvas">
    <div class="icon">
        <div class="magento1"></div>
        <div class="magento2"></div>
        <div class="magento3"></div>
        <div class="magento4"></div>
        <div class="magento5"></div>
        <div class="magento6"></div>
        <div class="magento7"></div>
        <div class="magento8"></div>
        <div class="magento9"></div>
        <div class="magento10"></div>
    </div>
</div>

css

کد [انتخاب] Expand

.canvas {
    height: 500px;
    margin: -80px auto 0;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    width: 830px;
    z-index: 10;
}
.icon, .icon * {
    position: absolute;
}#magento {
    background: #f6f6f6;
}
#magento .icon {
    left:55px;
    top:70px;
    -o-transform:scale(1.4);
    -ms-transform:scale(1.4);
    -moz-transform:scale(1.4);
    -webkit-transform:scale(1.4);
    transform:scale(1.4);
}
.magento1 {
    background: #f6844e;
    height: 104px;
    left: 161px;
    position: absolute;
    top: 72px;
    -o-transform: skewy(-30deg);
    -moz-transform: skewy(-30deg);
    -ms-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
    transform: skewy(-30deg);
    width: 89px;
}
.mozilla .magento1{
    left: 162px;
}
.magento2 {
    background: #f6844e;
    height: 104px;
    left: 250px;
    position: absolute;
    top: 72px;
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    width: 89px;
}
.magento3 {
    background: #f15c22;
    height: 104px;
    left: 161px;
    position: absolute;
    top: 124px;
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    width: 89px;
}
.mozilla .magento3 {
    left: 162px;
}
.magento4 {
    background: #f15c22;
    height: 104px;
    left: 250px;
    position: absolute;
    top: 124px;
    -o-transform: skewy(-30deg);
    -moz-transform: skewy(-30deg);
    -ms-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
    transform: skewy(-30deg);
    width: 89px;
}
.magento5,.magento6,.magento7,.magento8,.magento9,.magento10 {
    background: #fff;
}
.magento5 {
    height: 105px;
    left: 183px;
    position: absolute;
    top: 118px;
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    width:24px;
}
.magento6 {
    height: 105px;
    left: 294px;
    position: absolute;
    top: 118px;
    -o-transform: skewy(-30deg);
    -moz-transform: skewy(-30deg);
    -ms-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
    transform: skewy(-30deg);
    width:24px;
}
.magento7 {
    height: 144px;
    left: 238px;
    position: absolute;
    top: 87px;
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    width:12px;
}
.mozilla .magento7 {
    left:239px;
}
.magento8 {
    height: 144px;
    left: 250px;
    position: absolute;
    top: 87px;
    -o-transform: skewy(-30deg);
    -moz-transform: skewy(-30deg);
    -ms-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
    transform: skewy(-30deg);
    width:12px;
}
.magento9 {
    height: 78px;
    left: 205px;
    position: absolute;
    top: 66px;
    -o-transform: rotate(60deg) skewy(30deg);
    -moz-transform: rotate(60deg) skewy(30deg);
    -ms-transform: rotate(60deg) skewy(30deg);
    -webkit-transform: rotate(60deg) skewy(30deg);
    transform: rotate(60deg) skewy(30deg);
    width:24px;
}
.magento10 {
    height: 78px;
    left: 272px;
    position: absolute;
    top: 66px;
    -o-transform: rotate(-60deg) skewy(-30deg);
    -moz-transform: rotate(-60deg) skewy(-30deg);
    -ms-transform: rotate(-60deg) skewy(-30deg);
    -webkit-transform: rotate(-60deg) skewy(-30deg);
    transform: rotate(-60deg) skewy(-30deg);
    width:24px;
}

demo : http://www.ecsspert.com/magento.php