How can I create an arrow effect between two elements?

I have two text elements side-by-side in a region and I want to have what looks like an arrow pointing from one to the other (screenshot attached, actually want arrow in other direction). I would prefer to do this via CSS, but I'm looking for some suggestions. Thanks.

  • Michael Bissett
    • Recruit

    Hey WPMonkey, Michael here! :slight_smile:

    Matt's right here, it would require a CSS triangle, and it's going to require some tweaking to get this looking the way you're wanting it to.

    You may find yourself needing to set the z-index (in case your arrow's not showing up above the content):

    https://css-tricks.com/almanac/properties/z/z-index/

    You may also need to get a bit creative in your use of margins (to help align the arrow, in relation to the other content):

    https://css-tricks.com/almanac/properties/m/margin/

    Kind Regards,
    Michael

  • WPMonkey
    • The Incredible Code Injector

    I was able to get part way there, but there is padding that I want to remove on the code element. How can I do that?

    The padding is coming from this:
    <div id="upfront-code_element-object-1462209151342-1036" class="upfront-output-object upfront-output-upfront-code_element c24 upfront-code_element-object" data-preset_map="">

    .upfront-output-object {
    padding: 15px;
    }

  • Michael Bissett
    • Recruit

    Hey WPMonkey, great job on the code! :slight_smile:

    Removing the top & bottom padding can be handled with the padding controls:

    As for the sideways padding, we'll need to take a different route for that. I've modified this part of the CSS code you wrote:

    .arrow-right {
        width: 0;
        height: 0;
        border-top: 64px solid transparent;
        border-bottom: 64px solid transparent;
        border-left: 64px solid #ufc1;
        position:relative;
        z-index:1;
        background-color:#000;
        float:right;
    }

    To this:

    .arrow-right {
        width: 0;
        height: 0;
        border-top: 64px solid transparent;
        border-bottom: 63px solid transparent;
        border-left: 64px solid #ufc1;
        position:relative;
        z-index:1;
        background-color:#000;
        float:right;
        margin-right: -15px;
    }

    And I'm seeing that it's fitting in nice and neat now:

    How's it looking on your end?

    Kind Regards,
    Michael

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.