Need Diamond Shaped Image with tight margins

[hitokage]

Hello! I am trying out CSS3 rotate options for the first time, as our client wants a diamond shaped image in the center (on top of) four other, also clickable images.

http://i57.tinypic.com/dgl5ar.png

Explanation in the image above. All five areas of color need to link to respective places, each with its own div and image/text/etc contained within. The diamond in the center is just an image and nothing else, but the div needs to end exactly at the edges of the diamond so you can’t go outside of the image and still click it.

Everything I try currently makes the div’s edges too large and the boundaries go over onto the ‘background’ divs.

Does anyone have a thought or two about how to manage this? We can’t use something like a hotspot/image map as this site is responsive.

[Paulie_D]

Seems easy enough…what have you tried?

[hitokage]

<a href="test"><div id="diamond"></div></a>

#diamond {
   width: 418px; 
   height: 418px; 
   background:url(images/test.png) no-repeat;
   /* Rotate <em>/
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   /</em> 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%;
}

[Paulie_D]

It’s going to be a little more complicated that that.

http://codepen.io/Paulie-D/pen/wdeyr/

[hitokage]

@Paulie_D

This almost works! The downside is that the center diamond needs to have a diamond shaped background. http://i62.tinypic.com/1zptqxj.png Is it possible to do that?

[hitokage]

Oh! I got it!!! THANK YOU SO MUCH FOR YOUR HELP! :)

[Paulie_D]

Is it possible to do that?

Probably but I think the image would need to be larger than the div. I’ll have a think.

[Paulie_D]

Oh! I got it!!! THANK YOU SO MUCH FOR YOUR HELP! :)

Care to share?

[hitokage]

<div id="gallery">
            <a href="1" class="new"></a>
            <a href="2" class="preowned"></a>
            <a href="3" class="serviceparts"></a>
            <a href="4" class="specials"></a>
            <a href="5" class="diamond"></a>
        </div> <!-- end gallery -->

#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/test.png); left:353px; top:194px; transform:rotate(45deg); height: 43%; width:29%;}

[Paulie_D]

Just curious…what are the dimensions of the image you are using?

[Paulie_D]

Also…it looks like you have some “magic numbers” in there

left:353px; 
top:194px; 
height: 43%; 
width:29%;}

[hitokage]

I’m not sure what you mean by ‘magic numbers’?

[Paulie_D]

Magic numbers are exact values need to make something work just right.

If something else changed (say perhaps the dimensions of your ‘gallery’) the layout would break.

https://css-tricks.com/magic-numbers-in-css/

[hitokage]

Paulie,

Ah! I never heard that term before, it’s cute!

The gallery will be staying as it is until it hits the media query at 999px, then I’ll move the ‘magic numbers’ to %. The center diamond cannot sit exact middle in all of my futzing around without a magic number, but once it goes to tablet sizes, it was declared okay to be a little off.

[hitokage]

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)";}

[Author]

Posts