Adding an arrow between two divs in html and css

I am looking to add an arrow between two divs. Here is an example image for reference:

https://i.sstatic.net/Sl5A8.png

This is my current setup:

<style>
        .link{
            font-size: 14px;
            margin-bottom: 10px;
        }
        .link a{
            border: 1px solid #d8d8d8;
            border-radius: 1px;
            color: #222222;
            padding: 0.4rem;
            display: block;
            text-align: center;
            height: 55px;
            line-height: 20px;
        }
        .custom_padding{
            padding-top: 15px !important;
        }
        .panel_custom{
            width: 100%;
            float: left;
            padding: 1rem;
        }
        .custom_a{
            padding: 0 !important;
            text-align: right;
            width: 100%;
            background: #EFEFEF !important;
        }
        .custom_a:hover, .custom_a:active{
            background: #EFEFEF !important;
        }
    </style>

  <div class="row">

        <div class="large-8 columns">
            <div class="large-12 columns accordion" style="padding: 0;" data-accordion>
                <div class="panel radius panel_custom accordion-navigation active">
                    <a href="#Normal" class="custom_a">Normal Pay Cycle</a>
                    <div id="Normal" class="panel_custom content active">
                        <div class="large-3 columns link"><a href="/timeclock/rapid">TimeClock Rapid Entry</a></div>
                        <div class="large-3 columns link"><a href="/timeclock/all/hoursworked" style="padding: 5px 0 0 0;">Hours Worked<br>(Approve Hours)</a></div>
                        <div class="large-3 columns link"><a href="/employees?Actions=Pay_Employee" class="custom_padding">Pay Employee</a></div>
                        <div class="large-3 columns link"><a href="/processing/taxpayments">Pay Taxes Owed</a></div>
                    </div>
                </div>
            </div>
            <div class="large-12 columns accordion" style="padding: 0;" data-accordion>
                <div class="panel radius panel_custom accordion-navigation active">
                    <a href="#Common" class="custom_a">Common Report</a>
                    <div id="Common" class="panel_custom content active">
                        <div class="large-4 columns link"><a href="/reports/employertotal" class="custom_padding">Employer's Tax Total</a></div>
                        <div class="large-4 columns link"><a href="/reports/hoursworked" class="custom_padding">Hours Worked</a></div>
                        <div class="large-4 columns link"><a href="/reports/employees" class="custom_padding">Employee Report</a></div>

                        <div class="large-4 columns link"><a href="/timeclock/all/hoursworked">TimeClock Hours Worked</a></div>
                        <div class="large-4 columns link"><a href="/reports/hoursworked132" class="custom_padding">Hours Worked 132 Col</a></div>
                        <div class="large-4 columns link"><a href="/processing/schedulechecks">Schedule of Checks Printed</a></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="large-4 columns accordion" data-accordion>
            <div class="panel radius panel_custom accordion-navigation active">
                <a href="#Maintain" class="custom_a">Maintain Employees</a>
                <div id="Maintain" class="panel_custom content active">
                    <div class="large-6 columns link"><a href="/employees/newemployee">Add Employee</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Details" class="custom_padding">Details</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Payrate" class="custom_padding">Payrate</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Note" class="custom_padding">Note</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Taxes" class="custom_padding">Taxes</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Accrual" class="custom_padding">Accrual</a></div>

                    <div class="large-6 columns link"><a href="/employees?Actions=Deductions" class="custom_padding">Deductions</a></div>
                    <div class="large-6 columns link"><a href="/employees?Actions=Delete" class="custom_padding">Delete</a></div>
                </div>
            </div>
        </div>
    </div>

I aim to achieve the following view using the given HTML code. Please refer to the image below for a visual representation:

https://i.sstatic.net/UmViB.png

htmlcss

Answer №1

If you want to create arrows using CSS, you can utilize pseudo-elements such as :after for a line and :before for a triangle shape. To adjust the position of these arrows, you can make use of position: absolute along with transform: translate().

ul {
  display: flex;
  list-style: none;
}
li {
  padding: 10px 25px;
  border: 1px solid black;
  margin: 0 25px;
  position: relative;
}
li:not(:last-child):after {
  content: '';
  height: 1px;
  background: black;
  width: 50px;
  position: absolute;
  right: -50px;
  top: 50%;
}
li:not(:last-child):before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  right: -50px;
  transform: translateY(-50%);
}
<ul>
  <li>Li</li>
  <li>Li</li>
  <li>Li</li>
  <li>Li</li>
</ul>

Answer №2

Here is a simple way to achieve this.

.border {
  height: 20px;
  width: 20px;
  border: 1px black solid;
  display: inline-block;
}
.arrow {
font-size: 25px;
color: red;
}
<div class="border">
</div><span class="arrow">&#8594;</span><div class="border">
</div>

You can then customize it further using CSS to suit your preferences.

Answer №3

Sharing some additional information that may prove helpful

div.one, div.two, div.three {
    height: 100px;
    width: 100px;
    border: 1px solid blue;
    margin-bottom: 18px;
    position: relative;
}

div.first, div.second {
   position: relative;
    float:left;
    min-height:1px;
}

div.first, div.second {
   position: relative;
    float:left;
    min-height:1px;
}


div.three {
  left: 150px;
  top: 62px;
}

div.one:after, div.two:after {
    content: '';
    height: 1px;
    background: black;
    width: 75px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    left: 100px;
    position: absolute;
    top: 50%;
}
div.three:after {
    content: '';
    height: 1px;
    background: black;
    width: 75px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    left: -76px;
    position: absolute;
    top: 50%;
}

div.three:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  border-style: solid;
  border-width: 7px 0 7px 20px;
  border-color: transparent transparent transparent black;
  transform: translateY(-50%);
  left: -20px;
}
div.one:before {
   content: '';
    height: 121px;
    background: black;
    width: 1px;
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
    position: absolute;
    top: 50%;
    left: 175px;
}
<div class="first">
  <div class="one">

  </div>

  <div class="two">

  </div>
</div>
<div class="second">
  <div class="three">

    </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Clicking on the hamburger menu causes the webpage to reset its scroll

I recently integrated a mobile hamburger menu into my website, which is primarily built around a single page. However, I noticed that whenever I open the menu, it automatically scrolls to the top of the page regardless of where you were previously scrollin ...

javascriptjqueryhtml

it will still function properly regardless of the width being set to zero

Is anyone able to explain the strange phenomenon I am experiencing with this code snippet? In this particular example, I have set the width of selector h3 to 0. However, when viewing it in IE 9 using F12 development tools, I can see that the width is indee ...

htmlcss

When the class name is identical, the click event appears to be malfunctioning

Why isn't the click event working in this code? What am I doing wrong? $(document).ready(function() { $('.dashboardList').click(function() { alert("hello"); }); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1. ...

javascriptjqueryhtmlcss

How can I trigger a function in code.gs to execute a script in an html file when a dialog is opened?

Within my Index.html file, I have a script tag that allows me to execute the code below when I launch the Modal Dialog on Google Sheets using google.run. --Index.html-- <script> function onSuccess(info) { ...add options to select tags... } functio ...

htmlgoogle-apps-scriptweb-applications

What is the best way to manage DOM modifications in a responsive design layout?

Developing a responsive website with only one breakpoint can be challenging, especially when restructuring the DOM to accommodate different screen sizes. It's important to consider not just CSS and media queries, but also how the elements are arranged ...

javascriptjquerycssdomresponsive-design

Utilizing preg_match in PHP to validate a textarea for alphanumeric characters, numeric values, and spaces

I've almost got everything working, but I'm stuck on how to utilize preg_match. I checked the manual here http://php.net/manual/en/function.preg-match.php, but it doesn't clearly explain the syntax for creating my own validation. For example ...

phpregexhtml

What is the best way to ensure the default style is applied when validating?

input { background: white; color: white; } input:in-range { background: green; color: white; } input:out-of-range { background: red; color: white; } <h3> CSS range validation </h3> Enter your age <input type="number" min="1" max= ...

htmlcsscss-selectors

"Facing a dilemma with Javascript's Facebox getElementById function - not fetching any

Utilizing facebox, I am initiating a small modal dialog with a form and attempting to retrieve the value from a text field on that form using javascript. Below is the HTML code: <div id="dialog-form95" style="display:none"> <div class="block"> ...

javascripthtmlcssgetelementbyidfacebox

What could be causing my getAsFile() method to return null?

Below is the code I have been working on: document.getElementById("Image_Panel").addEventListener('paste', (event) => { console.log("Initiating image paste - Step 1"); const clipboardData = event.clipboardData; // Checking ...

javascripthtmlcssimage

Is there a way to evenly space out the buttons in the Nav element with more room in between each one?

I need the buttons to be evenly spaced with more room between them. And, of course, they need to be responsive in the end. I attempted to use Bootstrap's "d-flex" class to arrange the buttons, but it didn't work as expected. If you review my Boo ...

javascripthtmlcssbootstrap-5

Fast search using two dropdown menus

Looking to implement a search functionality with two drop down boxes using ajax. Here's the code snippet: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> $(do ...

phpjqueryhtmlajax

Is there a way to set the content to be hidden by default in Jquery?

Can anyone advise on how to modify the provided code snippet, sourced from (http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_hide_show), so that the element remains hidden by default? <!DOCTYPE html> <html> <head> <scrip ...

javascriptjqueryhtmlcssajax

Which CSS property is utilized to position the parent level of a menu below the children when they are shown on the screen?

Recently, my Drupal superfish menu has been acting up after updating the module. The issue I encountered was that the children no longer appear above their parent items. Can anyone help me figure out which setting dictates the order in which they are dis ...

css

Is it possible to insert Ruby variables into HAML css using interpolation?

I am in need of a sequence of classes, such as .module1, .module2, ... module(n). My goal is to specify these classes using css, ruby, and HAML: :css .mod1 { background-image: url("#{extra.image}"); } Can I use Ruby variables to streamline ...

ruby-on-railscssrubyhamlinterpolation

What is the best way to place a footer at the bottom of the screen using Bootstrap 5?

I need help ensuring that the footer element always stays at the bottom of the screen, regardless of the screen size. The code I currently have works fine on mobile screens, but it appears in the middle of the screen on tablets or larger screens. Here is ...

htmlcss-positionbootstrap-5footer

CSS Hover Effects on Navigation Bar Not Displaying as Expected

I was aiming to make one of my Navbar tabs stand out by having a different appearance compared to the others. However, there seems to be an issue with the text color for this particular tab in the hover state - it works inconsistently across different brow ...

htmlcsstwitter-bootstrap

How can you find the "et-custom-css" section in WordPress?

One of the challenges I'm facing with my WordPress page is that some CSS classes are located under <style type="text/css" id="et-custom-css">. Additionally, there is a comment at the top of the CSS saying: /* - - - - - - Additional page info - ...

htmlcsswordpress

Preloaded background images are loaded twice

I have a background image that I am preloading and caching, but my code is not reading it from the cache. It keeps loading the image as if it is not cached. Even though I have 8 images in the "imgSrcArray," I have simplified this example by hard coding jus ...

jquerycss

A guide on utilizing a dropdown menu in PHP to showcase various MySQL tables

I am looking for a solution to display different tables (table 1 to 5) from my MySQL database when selected from a drop-down list. However, when I attempted to execute the code below, I did not receive any response and no data was loaded from the SQL datab ...

phphtmlmysqlpdo

Creating a custom internal link with parameters using Twig

I am trying to create a link using this code: {{ path('article_show', { 'slug': article.slug }) }} but for an internal link format, such as: <a href="#ID_name">...</a> within an HTML context, while also passing one or mo ...

phphtmlsymfonytwighref