Есть некая страница, на которой вверху баннер. Баннер делал не я, он такой, как есть, исправить я его не могу
Вот как это выглядит
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Какой то заголовок</title>
<style>
.prep-banner {
width: 100%;
margin-bottom:14.7vw;
font-family: Arial;
}
.prep-banner>.tr {
z-index: -4;
position: absolute;
height: 0px;
width: 0px;
left: -30vw;
top: 0vw;
border: 12.6vw solid transparent;
border-right: 30vw solid transparent;
border-left: 30vw solid transparent;
border-top: 12.6vw solid #000066;
}
.prep-banner>.tr-w {
z-index: 9;
position: absolute;
height: 0px;
width: 0px;
left: 3.335vw;
top: 8.2vw;
border: 1.5vw solid transparent;
border-right: 3.57vw solid transparent;
border-left: 3.57vw solid transparent;
border-top: 1.5vw solid white;
}
.prep-banner .ipm {
position: absolute;
z-index: 6;
left: -2.5vw;
top: -2vw;
width: 14vw;
border: 0px;
}
.prep-banner>.first-line {
position: absolute;
z-index: 1;
top: 8.2vw;
height: 1.5vw;
background-color: #000076;
width: 100%;
}
.prep-banner>.first-line-w {
position: absolute;
z-index: 6;
top: 8.2vw;
height: 1.5vw;
background-color: white;
width: 6.905vw;
}
.prep-banner>.title>a {
position: absolute;
top: 0.93vw;
right: 1.6vw;
text-align: right;
font-weight: bold;
font-size: 4.5vw;
color: #000076;
}
.prep-banner>.crossref {
position: absolute;
z-index: 7;
right: 1vw;
top: 0.4vw;
width: 8.5vw;
border-width: 10px;
border-color: black;
}
/*
.prep-banner {
filter:invert(100%);
}
*/
</style>
</head>
<body>
<!-- Верхний баннер с эмблемой-->
<div class="prep-banner">
<div role="presentation" class="tr"></div>
<div role="presentation" class="tr-w"></div>
<a href="https://****" title="Головная страница"><img class="ipm" src="qqq.png"
alt="Эмблема " /></a>
<div role="presentation" class="first-line"></div>
<div role="presentation" class="first-line-w"></div>
<div class="title">
<a class="preprints" href="https://****" title="Что то">Что то написано</a>
</div>
</div>
<header class="p-title">
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
</header>
<main class="p-main p-offset">
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
</main>
</body>
</html>
Теперь раскомментарим строки в style, где filter
<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Какой то заголовок</title>
<style>
.prep-banner {
width: 100%;
margin-bottom:14.7vw;
font-family: Arial;
}
.prep-banner>.tr {
z-index: -4;
position: absolute;
height: 0px;
width: 0px;
left: -30vw;
top: 0vw;
border: 12.6vw solid transparent;
border-right: 30vw solid transparent;
border-left: 30vw solid transparent;
border-top: 12.6vw solid #000066;
}
.prep-banner>.tr-w {
z-index: 9;
position: absolute;
height: 0px;
width: 0px;
left: 3.335vw;
top: 8.2vw;
border: 1.5vw solid transparent;
border-right: 3.57vw solid transparent;
border-left: 3.57vw solid transparent;
border-top: 1.5vw solid white;
}
.prep-banner .ipm {
position: absolute;
z-index: 6;
left: -2.5vw;
top: -2vw;
width: 14vw;
border: 0px;
}
.prep-banner>.first-line {
position: absolute;
z-index: 1;
top: 8.2vw;
height: 1.5vw;
background-color: #000076;
width: 100%;
}
.prep-banner>.first-line-w {
position: absolute;
z-index: 6;
top: 8.2vw;
height: 1.5vw;
background-color: white;
width: 6.905vw;
}
.prep-banner>.title>a {
position: absolute;
top: 0.93vw;
right: 1.6vw;
text-align: right;
font-weight: bold;
font-size: 4.5vw;
color: #000076;
}
.prep-banner>.crossref {
position: absolute;
z-index: 7;
right: 1vw;
top: 0.4vw;
width: 8.5vw;
border-width: 10px;
border-color: black;
}
.prep-banner {
filter:invert(100%);
}
</style>
</head>
<body>
<!-- Верхний баннер с эмблемой-->
<div class="prep-banner">
<div role="presentation" class="tr"></div>
<div role="presentation" class="tr-w"></div>
<a href="https://****" title="Головная страница"><img class="ipm" src="qqq.png"
alt="Эмблема " /></a>
<div role="presentation" class="first-line"></div>
<div role="presentation" class="first-line-w"></div>
<div class="title">
<a class="preprints" href="https://****" title="Что то">Что то написано</a>
</div>
</div>
<header class="p-title">
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
Заголовок<br>
</header>
<main class="p-main p-offset">
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
Текст Текст Текст Текст Текст Текст Текст Текст<br>
</main>
</body>
</html>
Каков эффект!
Я только цвета инвертировал. А куда все поползло?