Half-text

by Scott Kaye

HTML

<span class="half" data-content="Hello">Hello</span>

CSS

span.half {
  font-size: 56pt;
  position: relative;
}

span.half::before, span.half::after {
  position: absolute;
  left: 0;
  content: attr(data-content);
}

span.half::before {
  color: red;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}

span.half::after {
  color: blue;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
}