Place div on top of boundary between two divs

Question

I'm trying to put the arrow on top in the middle of two div like this picture: link.

The code below doesn't work and I'm trying to make it work with position : absolute ; but I don't know how.

.section1 {
  background-color: lightgray;
  text-align: center;
  padding: 100px;
}

.content {
  display: inline-block;
}

.section1 .separator {
   margin: 0 auto;
   position: absolute; /* XXX this does something weird */
   bottom: 0;
}

.section2 {
  height: 200px;
  background-color: coral;
}

<div class="section1">
  <div class="content">
    Hello, world!
  </div>
  <div class="separator">
    ▼
  </div>
</div>
<div class="section2">
  <div class="content">
    Hello, world!
  </div>
</div>

I would look at using absolute positioning to align it with the bottom of it's container, then using [CSS transform: translate](https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate) to shift it down 50% of it's height. — DBS, May 21 '20 at 16:55

score 4 · Accepted Answer · answered May 21 '20 at 17:00

First up: You need to make section1 use relative positioning so that the separator is relative to it's container.

Then you can position it in the bottom center with:

bottom: 0;
left: 50%;

And then finally, translate it 50% left (So that it's center is aligned with it's containers center) and 50% down (So it's half out of it's container) using:

transform: translate(-50%, 50%);

Working example:

.section1 {
  background-color: lightgray;
  text-align: center;
  padding: 100px;
  
  /* This makes sure the separator is positioned relative to the correct element */
  position: relative;
}

.content {
  display: inline-block;
}

.section1 .separator {
  position: absolute;
  
  /* Position the element in the center bottom */
  bottom: 0;
  left: 50%;
  
  /* Translate it the the offset position */
  transform: translate(-50%, 50%);
}

.section2 {
  height: 200px;
  background-color: coral;
}

<div class="section1">
  <div class="content">
    Hello, world!
  </div>
  <div class="separator">
    ▼
  </div>
</div>
<div class="section2">
  <div class="content">
    Hello, world!
  </div>
</div>

Place div on top of boundary between two divs

1 Answers1