html - 带有图像背景的 CSS2 菱形

Question

我想制作一个带有图像背景的菱形。我能做到，唯一的问题是图像似乎同时旋转，这是我不想要的。这也需要在ie8中工作

fiddle :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%;
}

Answer 1

尝试移除旋转并添加

#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