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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #166355
    hitokage
    Participant

    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.

    #166358
    Paulie_D
    Member

    Seems easy enough…what have you tried?

    #166359
    hitokage
    Participant
    <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%;
    }
    #166360
    Paulie_D
    Member

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

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

    #166361
    hitokage
    Participant

    @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?

    #166363
    hitokage
    Participant

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

    #166364
    Paulie_D
    Member

    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.

    #166365
    Paulie_D
    Member

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

    Care to share?

    #166366
    hitokage
    Participant
    <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%;}
    
    #166368
    Paulie_D
    Member

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

    #166370
    Paulie_D
    Member

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

    left:353px; 
    top:194px; 
    height: 43%; 
    width:29%;}
    
    #166371
    hitokage
    Participant

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

    #166373
    Paulie_D
    Member

    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/

    #166375
    hitokage
    Participant

    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.

    #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)";}
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.