score:1

as drew reese mentioned "this only works if the content is the same on both sides of the divider." so probably you should make the structure of your box like:

<div>
   <div style="flex:1;"></div>
   <span class="separator"></span>
   <div style="flex:1;"></div>
</div>

below you will find correction for your arrow. i used border instead of background to make arrow as you wish and then centered it using left: 50%; and transform: translate(-50%, -50%) rotate(225deg);

code:

.box::after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  background-color: white;
  top: -1px;
  left: 50%;
  /*border-left: 8px solid;*/
  border-left-color: #fff;
  border-bottom: 1px solid black;
  border-right: 1px solid black;
  transform: translate(-50%, -50%) rotate(225deg);
}

output:

enter image description here


Related Query

More Query from same tag