Как сверстать линии под углом

Question

Как сверстать с использованием CSS красные пунктирные линии, как на примере:

При этом хочется сохранить адаптивность макета, чтобы при увеличении ширина экрана и, соответственно, увеличении расстоянии между элементами, линии меняли длину и угол наклона

Answer 1

.redline {
  display: inline-block;
  --line-color: red;
  border-bottom: 2px solid var(--line-color);
  position: relative;
  box-sizing: border-box;
}

.redline::before,
.redline::after {
  content: '';
  display: block;
  position: absolute;
  pointer-events: none;
}

.redline::before { /* line */
  width: 200px;
  height: 2px;
  background: linear-gradient(to right,
    var(--line-color) 49.99%,
    var(--line-color) 50%,
    transparent 50%);
  left: 100%;
  bottom: -2px;
  background-repeat: repeat;
  background-size: 4px auto;
  transform-origin: left center;
  transform: rotate(25deg);
}

.redline::after { /* marker */
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: radial-gradient(ellipse at center,
    var(--line-color) 0%,
    var(--line-color) 5%,
    transparent 6%,
    transparent 65%,
    var(--line-color) 67%,
    var(--line-color) 100%);
  left: calc(100% + 155px);
  bottom: -110px;
}

<div class="redline">
  Feature 1
</div>
<br><br><br><br>
<div class="redline" style="--line-color: blue">
  Feature 2
</div>

БЛОГ НА HUSL

Как сверстать линии под углом

Ответы (1 шт):