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.
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>
Related Topics
Angular 6 Component Not Showing Up
How to Make a Gap Between Two Div Within the Same Column
How to Make CSS Grid Items Take Up Remaining Space
How to Select All the Checkboxes in Angular 6
Angular: Using the Ternary Operator in HTML Template
Css Margin Terror; Margin Adds Space Outside Parent Element
How to Change the Style of the Title Attribute Inside an Anchor Tag
Websockets Vs. Server-Sent Events/Eventsource
Limit File Format When Using ≪Input Type="File"≫
How to Pass Boolean Variable of False in a Url
Using HTML Anchor Link #Id in Angular 6
Using Mailto to Send Email With an Attachment
How to Modify the Primeng P-Calendar Style
How to Stop Background from Jumping to the Top on Modal Toggle
How to Give Text or an Image a Transparent Background Using Css