Как реализовать текст двух цветов

01 февраля 2022, 17:20

Появился в макете такой дизайн кнопки 404:

Как я не искал, но не нашёл реализации данного дизайна

Подскажите как такое можно сделать

Answer 1

div { 
  background: linear-gradient(150deg, #212121 0%, #212121 50%, #b71c1c 50.5%, #b71c1c 100%); 
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;  
  font-family: sans-serif; 
  font-size: 8rem; 
  font-weight: bold;  
  text-align: center; 
}

<div> 
  HELLO 
</div>

Вариант с clip-path

div { 
  font-family: sans-serif; 
  font-size: 8rem; 
  font-weight: bold; 
  color: #212121; 
  position: relative; 
} 
 
div::after { 
  content: "404"; 
  position: absolute; 
  left: 0; 
  clip-path: polygon(100% 15%, 0 100%, 100% 100%); 
  color: #b71c1c; 
}

<div> 
  404 
</div>

Answer 2

Вариант на SVG

<svg viewBox="0 0 250 100"> 
  <defs> 
    <style> 
      .txt{ 
        font-size: 100px; 
        font-weight: 900; 
        font-family: sans-serif; 
      } 
    </style> 
    <clipPath id="clip"> 
      <path d="M220,-2 220,80 0,100" fill="red" /> 
    </clipPath> 
  </defs> 
  <text class="txt" x="20" y="80" fill="#3c4852">404</text> 
  <text class="txt" x="20" y="80" fill="#48689a" clip-path="url(#clip)">404</text> 
</svg>