Adding an Arrow on Both Sides of a Div Using CSS

Adding an arrow on both sides of a div using CSS?

Add an extra div inside .arrow, on which you add a :before and :after pseudo class as well. (Note: the extra div is necessary because of the extra border. The border is created by creating two overlapping divs, :before and :after)

.arrow_box {     position: relative;     background: #88b7d5;     border: 4px solid #c2e1f5;     width: 200px;}.arrow_box:after, .arrow_box:before {     bottom: 100%;     border: solid transparent;     content: " ";     height: 0;     width: 0;    position: absolute;} .arrow_box:after {     border-color: rgba(136, 183, 213, 0);     border-bottom-color: #88b7d5;    border-width: 30px;    left: 50%;     margin-left: -30px; } .arrow_box:before {     border-color: rgba(194, 225, 245, 0);     border-bottom-color: #c2e1f5;     border-width: 36px;     left: 50%;     margin-left: -36px;}.arrow_box > div:after, .arrow_box > div:before {     top: 100%;     border: solid transparent;     content: "";     height: 0;     width: 0;    position: absolute;} .arrow_box > div:after {     border-color: rgba(136, 183, 213, 0);     border-top-color: #88b7d5;    border-width: 30px;    left: 50%;     margin-left: -30px; } .arrow_box > div:before {     border-color: rgba(194, 225, 245, 0);     border-top-color: #c2e1f5;     border-width: 36px;     left: 50%;     margin-left: -36px;}

<div class="arrow_box">    <div>        bla!<br />        bla!<br />        bla!<br />        bla!<br />        bla!<br />        bla!<br />    </div></div>

How to make arrows on both sides of a box using css

Try this (using Pseudo-elements):

CSS

#arrowbox
{
    width: 200px;
    height: 50px;
    background-color:green;
    margin-left:100px;
    margin-top:100px;
    position: relative;
}

#arrowbox:after {
    left: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 128, 0, 0);
    border-left-color: #008000;
    border-width: 25px;
    margin-top: -25px;
}

#arrowbox:before {
    right: 100%;
    top: 50%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-color: rgba(0, 128, 0, 0);
    border-right-color: #008000;
    border-width: 25px;
    margin-top: -25px;
}

DEMO HERE

add an arrow infront and after a div

I have modified chevron shape, from this page: https://css-tricks.com/examples/ShapesOfCSS/ (borrowed idea, credits to mr Anthony Ticknor:))

.chevron {  position: relative;  text-align: center;  height: 60px;  width: 260px;  line-height:60px;  margin-bottom:10px;
}
.chevron:before {   content: '';    position: absolute;    top: 0;    left: 3%;    height: 50%;    width: 100%;      transform: skew(25deg, 0deg);    border:1px solid red;    border-bottom:none;}
.chevron:after {   content: '';    position: absolute;    top: 50%;    left: 3%;    height: 50%;    width: 100%;       transform: skew(-25deg, 0deg);       border:1px solid red;    border-top:none;}

<div class="chevron">1</div><div class="chevron">2</div>

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>

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="Sample Image">  </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="Sample Image">  </div>  <div class="right_button">    <button class="right-btn btn">Next</button>  </div></div>

CSS Put arrows on each side of a Box(div)

Since you are looking to interact with these shapes, you'd be better to go with a different approach to making your triangles, rather than a border hack.

.box {  height: 150px;  width: 150px;  background: lightgray;  position: relative;}.wrap {  position: absolute;  top: 0;  left: 25%;  height: 25%;  width: 50%;  overflow: hidden;}.touch {  position: absolute;  top: 0;  left: 50%;  height: 200%;  width: 200%;  transform: rotate(45deg);  transform-origin: top left;  background: gray;  cursor: pointer;}.wrap:nth-child(2) {  transform: rotate(90deg);  transform-origin: top left;  top: 25%;  left: 100%;}.wrap:nth-child(3) {  transform: rotate(180deg);  transform-origin: top left;  top: 100%;  left: 75%;}.wrap:nth-child(4) {  transform: rotate(-90deg);  transform-origin: top left;  top: 75%;  left: 0;}.touch:hover {  background: tomato;}

<div class="box">  <span class="wrap"><span class="touch"></span></span>  <span class="wrap"><span class="touch"></span></span>  <span class="wrap"><span class="touch"></span></span>  <span class="wrap"><span class="touch"></span></span>
</div>

div.error-label {  padding: 10px;  color: #fff;  background-color: #DA362A;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;  border-radius: 5px;  width: 190px;  margin: 30px;}
div.error-label:before {  content: ' ';  height: 0;  position: absolute;  width: 0;  left: 18px;  border: 10px solid transparent;  border-right-color: #DA362A;}

<div class="error-label">This field is required.</div>