如何为左侧和右侧设置两种不同颜色的标题

Question

标题左侧和右侧应显示白色和蓝色，而正文背景颜色为灰色。

左侧区域为白色，标题内有徽标，右侧区域为蓝色。

使用colorzilla，我为container1制作了背景，为右侧水平半蓝色。然后我加入了几个伪元素来实现剃刀刀片效果。当我为身体设置background-color时，我意识到标题内带有我的徽标的区域用车身颜色着色。

我读过linear-gradient，但我被告知使用它我会面临交叉浏览问题，因为即使您按照它应该的方式进行操作，仍然有一个版本列表，甚至是浏览器无法理解它。

这正是我发现自己陷入困境的地方。我需要所有浏览器和版本都理解此代码，或者在这种情况下尽可能多地理解此代码。请告诉我如何在不使用 Colorzilla 和linear-gradient的情况下做到这一点。

@media only screen and (min-width: 900px) {
.container1 {
width: 100%;
margin: 0 auto;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#1e5799+44,1e5799+44,7db9e8+45,1e5799+45,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,7db9e8+46,1e5799+46,7db9e8+50,1e5799+50,1e5799+100&0+44,0+46,1+47 */
background: -moz-linear-gradient(left, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(30, 87, 153, 0) 44%, rgba(30, 87, 153, 0) 45%, rgba(30, 87, 153, 0) 46%, rgba(30, 87, 153, 1) 47%, rgba(30, 87, 153, 1) 50%, rgba(30, 87, 153, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#1e5799', GradientType=1);
/* IE6-9 */
}
.logo {
width: 250px;
}
header {
display: flex;
justify-content: space-between;
padding: 0em 3.15em;
}
.cont {
position: relative;
}
.cont::before {
position: absolute;
content: '';
width: 40em;
height: 15rem;
background: blue;
bottom: -.8em;
z-index: -1;
}
.cont::before {
left: 42%;
transform: skew(-30deg);
}
.cont::after {
position: absolute;
content: '';
width: 1.6em;
height: 10rem;
background: green;
bottom: -.8em;
}
.cont::after {
left: 38.9%;
transform: skew(-30deg);
}

<div class="container1">
<div class="cont">
<header>
<img src="/images/logo.png" alt="O-Credit logo" class="logo">
<nav>
<div id="menu-bar" class="hide-desk">
<div class="menu" id="menu">
<div id="bar1" class="bar"></div>
<div id="bar2" class="bar"></div>
<div id="bar3" class="bar"></div>
</div>
</div>
<ul class="show-desk hide-mob" id="nav">
<li id="exit" class="exit-btn close hide-desk">
</li>
<li><a href="#">Обрати позику</a></li>
<li><a href="#">Компанії</a></li>
<li><a href="#">Види позик</a></li>
<li><a href="#">Блог</a></li>
<li></li>
</ul>
</nav>
</header>
</div>
</div>

带有徽标的标题左侧显示背景白色。同一标题的右侧以显示背景蓝色。并将"正文"设置为除标题外的所有位置都显示背景灰色。

Answer 1

.header {
display: flex;
justify-content: space-between;
padding: 0em 3.15em;
background: linear-gradient(to right, blue 50%, red 50%)
}