How to Put Arrow Between Two Divs Using HTML and CSS

How to put arrow between two divs using html and css

You can use pseudo-elements for this, for example :after for line and :before for triangle. To position arrows you can use position: absolute 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>

Draw an arrow between two divs

You might consider SVG.

enter image description here

In particular, you can use a line with a marker-end shaped with an arrow-path.

Be sure to set orient=auto so the arrowhead will be rotated to match the slope of the line.

Since SVG is a DOM element, you can control the start/end position of the line in javascript.

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/9aCsJ/

<svg width="300" height="100">

    <defs>
        <marker id="arrow" markerWidth="13" markerHeight="13" refx="2" refy="6" orient="auto">
            <path d="M2,2 L2,11 L10,6 L2,2" style="fill:red;" />
        </marker>
    </defs>

    <path d="M30,150 L100,50"
          style="stroke:red; stroke-width: 1.25px; fill: none;
                 marker-end: url(#arrow);"
    />

</svg>

Place two arrows on each side of a div AND make it responsive

Use flexbox on the .dashboard div with the default direction of row and adjust the HTML to take advantage of the flow.

.dashboard {  display: flex;  align-items: center;  justify-content: center;}

<div class="dashboard">  <div class="left_button">    <button class="left-btn btn">Prev</button>  </div>  <div class="dashboard-pic">    <img src="http://www.fillmurray.com/140/200" alt="">  </div>  <div class="right_button">    <button class="right-btn btn">Next</button>  </div></div>
<div class="dashboard">  <div class="left_button">    <button class="left-btn btn">Prev</button>  </div>  <div class="dashboard-pic">    <img src="http://www.fillmurray.com/460/300" alt="">  </div>  <div class="right_button">    <button class="right-btn btn">Next</button>  </div></div>

Creating an arrow for a div in css

you may try using a rotated square with :before (or :after) element like this :

.imageDiv {  margin-top: 70px;  background: #fff;  display: block;  width: 555px;  height: 455px;  padding: 10px;  border-radius: 2px 2px 2px 2px;  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;}
.bottomDiv {  position: relative;  bottom: 460px;  left: 404px;  width: 295px;  height: 295px;  background: black;}.imageDiv.bottomDiv:before {    content: " ";    position: absolute;    background: #000;    width: 30px;    height: 30px;    top: 25px;    left: -15px;    transform: rotate(45deg);}

<div class="row">  <div class="col-md-10">    <div class="imageDiv"></div>    <div class="imageDiv bottomDiv"></div>  </div></div>

How to Put Arrow Between Two Divs Using HTML and CSS