Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Need Diamond Shaped Image with tight margins Reply To: Need Diamond Shaped Image with tight margins

#166380
hitokage
Participant

Paulie_D,

And now it’s fixed without magic numbers, even if IE8 is off.

#gallery{height:680px;width:1000px; position:relative; display:inline-block;margin:0;padding:0;}
    #gallery a{position:absolute; height:50%; width:50%; display:inline-block;margin:0;padding:0;}
    #gallery .new{background:green;}
    #gallery .preowned{background:red;right:0;}
    #gallery .serviceparts{background:blue;bottom:0;}
    #gallery .specials{background:lightBlue;right:0;bottom:0;}
    #gallery .diamond{background: url(images/diamond.png); left:35.4%; top:28.4%; height: 43%; width:29%;
        -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
       -ms-transform: rotate(45deg);
       -o-transform: rotate(45deg);
       transform: rotate(45deg);
       filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476);
       /* IE8 */
       -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)";}