html - CSS2菱形与图像背景

我想用图像背景制作菱形。我可以做到，唯一的问题是图像似乎在我不希望的同时旋转。这也需要在ie8中工作

小提琴：http://jsfiddle.net/zangief007/2bft2rcx/1/

#diamond {
    width: 80px;
    height: 80px;
    background: purple;
    margin: 3px 0 0 30px;
    /* Rotate */
    -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
         -o-transform: rotate(-45deg);
            transform: rotate(-45deg);
    /* Rotate Origin */
    -webkit-transform-origin: 0 100%;
       -moz-transform-origin: 0 100%;
        -ms-transform-origin: 0 100%;
         -o-transform-origin: 0 100%;
            transform-origin: 0 100%;
}

最佳答案

尝试删除旋转并添加

#diamond:before, #diamond:after{
    content: '';
    border: 80px solid transparent;
    position: absolute;
    top: 50%;
    margin-top: -80px;
    z-index: -1;
}
#diamond:before {
    border-right-color: #ccc;
    border-left: none;
    right: 50%;
}
#diamond:after {
    border-left-color: #ccc;
    border-right: none;
    left: 50%;
}

Demo

关于html - CSS2菱形与图像背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25437721/