Home › Forums › CSS › Need Diamond Shaped Image with tight margins › Reply To: Need Diamond Shaped Image with tight margins
March 20, 2014 at 10:33 am
#166380
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)";}