Как добавить стиль текста с верхней половиной только цветом заливки, а нижней - только с текстовой чертой?

Question

То, чего я пытаюсь достичь, показано на следующем снимке экрана:

В нижней части заголовка есть текстовый штрих, боковые и верхние части имеют (цвет текста. В настоящее время я достиг этого, создав два элемента div в контейнере, чтобы «соединить» их вместе. Но есть ли более чистый способ достижения этого вместо написания двух div с одинаковым содержимым?

Мой код:

.about_title-top {
  width: 100%;
  position: absolute;
  text-align: center;
}

.about_title-top_upper {
  position: absolute;
  top: 0;
  /*transform: translateY(50%);*/
}

.about_title-top_lower {
  position: absolute;
  top: 0;
  -webkit-clip-path: inset(44.5% 10% 0 10.25%);
  clip-path: inset(50% 20% 0 20%);
}

.text-border{
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: transparent;
    -webkit-text-stroke-color: red;
    -webkit-filter: drop-shadow(0px 0px 2px red);
    filter: drop-shadow(0px 0px 2px red);
}

<div class="about_title-top">
  <h3 class="about_title-top_upper">Utrecht based interactive designer & front-end developer</h3>
  <h3 class="about_title-top_lower text-border">Utrecht based interactive designer & front-end developer</h3>
</div>

Answer 1

Вот идея с использованием clip-path, где вам нужно будет продублировать текст, но не в коде HTML:

.box {
  font-weight: 900;
  font-size: 70px;
  text-align: center;
  font-family: sans-serif;
  position:relative;
}

.box:before {
  content: attr(data-text);
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-color: red;
  -webkit-filter: drop-shadow(0px 0px 2px red);
  filter: drop-shadow(0px 0px 2px red);
}
.box:after {
  content: attr(data-text);
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  color:#fff;
  background:#000;
  clip-path:polygon(0 0,100% 0,100% 100%,80% 100%,80% 40%,20% 40%,20% 100%,0 100%);
  filter: drop-shadow(0px 0px 2px #fff);
}

<div class="box" data-text="Utrecht based interactive designer & front-end developer"></div>