Почему граница моего центрального диагонального изображения темнее у нижнего края?

Question

Почему моя граница изображения темнее у нижнего края? Это демонстрационная ссылка

. На следующем изображении, которое обеспечивает увеличение, вы можете открыть программное обеспечение, такое как GIMP, а затем увеличить, чтобы более явно проверить разницу значений:

Я застрял с этой проблемой, я не знаю, как образ имеет такое поведение, поэтому мне нужна ваша помощь.

Ниже кода фрагмент:

import React, { Component } from 'react';
import style from "./styles.module.css"

export default class Homepage extends Component {
	render() {
		return (
			<div className={style.component} >
				<div className={style.component} >
				{

					/*<div className={style.top_page}/>*/
				}
					<div className={style.top_image_container}>
					  <div className={style.image_left}>
					    <img src="https://i.picsum.photos/id/10/800/800.jpg"/>
					  </div>
					  <div className={style.diagonal_image}>
					     
					    <img src="https://previews.123rf.com/images/tomo00/tomo001605/tomo00160500403/56812872-wallpaper-material-check-plaid-cross-checkered-diamond-diamond-diamond-triangle-square-two-color-squ.jpg"/>
					  </div>
					    <div className={style.image_right}>
					    <img src="https://i.picsum.photos/id/12/800/800.jpg"/>
					  </div>
					</div>
				</div>
			</div>
		);
	}
}

.component{
	width: 100vw;
	min-height: 100vh;
	background: #00cdd7;
	background:white;
	color:white;
	font-size:5em;
	font-weight: bold;
}


.top_image_container{
  position:relative;
  display:flex;
  overflow:hidden;
  width:100vw;
  height:40vh;
  background:yellow;
  justify-content: flex-start;
  align-items: flex-start; 
}

img{
  object-fit: cover;
}

.image_left img{
  width:50%;
  height:100%;
  position:absolute; 
  top: 0%; 
  left: 0%;
}

.image_right img{
 width:50%;
  height:100%;
  position:absolute; 
  top: 0%; 
  right: 0%;
}

.diagonal_image{
	transform: scale(.9999);
  z-index:100;
  position:absolute;
  height:40vh;
  width:100%;  
  background:orange;
  top: 50%; right: 50%;
  transform: translate(50%,-50%);
  clip-path:polygon(42.5% 0, 100% 0, 57.5% 100%, 0 100%)
}

.diagonal_image img { 
  position:relative; 
  z-index:100;
  height:180%; 
  width:100%; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Кажется, проблема с исправлением связана с clip-path. Вы можете исправить это, добавив дополнительный пиксель к элементу, к которому вы применяете clip-path

Вместо height:40vh сделайте его height:calc(100% + 1px)

Answer 2

Вы применяете темный backgroundColor к своему стилю .component:

background: #00cdd7;

Если изображение, которое вы отображаете, имеет прозрачность, оно просвечивает и вызывает появление дополнительной темной линии внизу.