Как нарисовать половину диагонали с одним цветом, а другую половину с другим из Navbar в CSS

Question

Я использую Bootstrap в сочетании со скриптами CSS и Java. Мне действительно трудно нарисовать этот фон в css, не затрагивая передний код. Во многих вопросах люди устанавливают ширину и высоту на 0%. Но я не могу использовать этот метод стилей из-за моего navbar. И я очень хочу знать, как прикрепить мой логотип в качестве названия бренда в прозрачном виде. Это изображение ниже ясно показывает, что я пытаюсь сделать:

Answer 1

Просто используйте Градиент :

.header {
  height:80px;
  background:linear-gradient(to bottom left,blue 49%,transparent 51%);
}

<div class="header">
</div>