<ul class="tree">
  <li class="tree__item tree__item--bottom-right">Lorem ipsum dolor</li>
  <li class="tree__item tree__item--bottom-left">Excepturi animi fugit</li>
  <li class="tree__item tree__item--top-center">Dolorum, voluptatum. Possimus!</li>
</ul>

.tree {
  --vertical-gap: 50px;
  --horizontal-gap: 20px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 50%;
  margin: calc(var(--vertical-gap) * -1) auto 0;
  color: #fff;
}

.tree__item {
  position: relative;
  width: calc(50% - var(--horizontal-gap));
  margin: 0 calc(var(--horizontal-gap) / 2);
  margin-top: var(--vertical-gap);
  background-color: red;
  box-sizing: border-box;
  padding: 8px; 
}

.tree__item::before, .tree__item::after {
  content: '';
  position: absolute;
  background-color: gray;
}

.tree__item--bottom-right::before {
  top: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: calc(var(--vertical-gap) / 2);
}

.tree__item--bottom-right::after {
  bottom: calc(var(--vertical-gap) / -2);
  left: calc(50% - 1px);
  width: calc(50% + var(--horizontal-gap) / 2 + 1px);
  height: 2px;
}

.tree__item--bottom-left::before {
  top: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: calc(var(--vertical-gap) / 2);
}

.tree__item--bottom-left::after {
  bottom: calc(var(--vertical-gap) / -2);
  right: calc(50% - 1px);
  width: calc(50% + var(--horizontal-gap) / 2 + 1px);
  height: 2px;
}

.tree__item--top-center::before {
  bottom: 100%;
  left: calc(50% - 1px);
  width: 2px;
  height: calc(var(--vertical-gap) / 2);
}