Flavour Monkey Flavour Monkey - 6 months ago 25
CSS Question

Want to put CSS arrows on adjacent divs pointing one direction

I am trying to create 3 divs across with arrows in the left and centre div pointing into the div to the right. I can get the first to point into the centre but as soon as I add the code for the centre and rename the div it disappears.

I think I may need some kind of

::before
operator to get it to work but not sure. Basically I would like a pink div with pink arrow pointing into a cream div with cream arrow pointing into a blue div:



Here is the code I am using:

.hero-box-pink {
position: relative;
background: #ab255c;
}

.hero-box-pink:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(171,37,92,0);
border-left-color: #ab255c;
border-width: 30px;
margin-top: -30px;
}

.hero-box-cream {
position: relative;
background: #fcfbe3;
}

.hero-box-cream:after {
left: 100%;
top: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(252,251,227,0);
border-left-color: #fcfbe3;
border-width: 30px;
margin-top: -30px;
}


Thanks in advance for any help with this.

Answer

Hope this is what you are looking for.

.container {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
}
.box {
  width: calc(100% /3);
  padding: 20px 40px;
  box-sizing: border-box;
  color: #fff;
}
.first-box {
  background: #88b7d5;
}
.second-box {
  background-color: tomato;
}
.third-box {
  background: skyblue;
}
.arrow_box {
  position: relative;
}
.arrow_box:after {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #88b7d5;
  border-width: 30px;
  margin-top: -30px;
  z-index: 99;
}
.first-box.arrow_box:after {
  border-left-color: #88b7d5;
}
.second-box.arrow_box:after {
  border-left-color: tomato;
}
<div class="container">
  <div class="box first-box arrow_box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.</div>
  <div class="box second-box arrow_box">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat.</div>
  <div class="box third-box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla sapiente, quasi. Blanditiis ullam sint magnam, aspernatur optio vero explicabo quibusdam voluptatem beatae aliquid magni! Tempore numquam debitis, eum voluptatum atque.</div>
</div>