HTML Image on top of triangle background - html

Question

I have an image on a triangle background, however there is seen a line crossing the image. I tried using z-index together with position both relative and absolute, but it doesn't seem to work. Can someone help me out? Much appreciated.
/* Reset. */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
/* Panels. */
.splitview {
position: relative;
width: 100%;
min-height: 45vw;
overflow: hidden;
}
.panel {
position: absolute;
width: 100vw;
min-height: 45vw;
overflow: hidden;
}
.panel .content {
position: absolute;
width: 100vw;
min-height: 45vw;
color: #FFF;
}
.panel .description {
width: 25%;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.panel img {
box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
width: 35%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.bottom {
background-color: rgb(44, 44, 44);
z-index: 1;
}
.bottom .description {
right: 5%;
}
.top {
background-color: rgb(77, 69, 173);
z-index: 2;
width: 50vw;
/*-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);*/
}
.top .description {
left: 5%;
}
/* Handle. */
.handle {
height: 100%;
position: absolute;
display: block;
width: 5px;
top: 0;
left: 50%;
z-index: 3;
}
/* Skewed. */
.skewed .handle {
top: 50%;
transform: rotate(30deg) translateY(-50%);
height: 200%;
-webkit-transform-origin: top;
-moz-transform-origin: top;
transform-origin: top;
}
.skewed .top {
transform: skew(-30deg);
margin-left: -1000px;
width: calc(50vw + 1000px);
}
.skewed .top .content {
transform: skew(30deg);
margin-left: 1000px;
}
/* Responsive. */
#media (max-width: 900px) {
body {
font-size: 75%;
}
}
<div class="splitview skewed">
<div class="panel bottom">
<div class="content">
<div class="description">
<h1>My name is John Snow.</h1>
<p>I like making popcorn with icicles alot.</p>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/original-image.jpg" alt="Original">
</div>
</div>
<div class="panel top">
<div class="content">
<div class="description">
<h1>I dream about this girl everyday, but cannot seem to forget her.</h1>
<p>People say not many people can fall in love, and it's good I can experience it, but what is unrequited love worth actually.</p>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/original-image.jpg" alt="Duotone">
</div>
</div>
<div class="handle"></div>
</div>

Answer 1

Use only one image and put it outside the panels.
/* Reset. */
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
.splitview img {
z-index: 3;
box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);
width: 35%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* Panels. */
.splitview {
position: relative;
width: 100%;
min-height: 45vw;
overflow: hidden;
}
.panel {
position: absolute;
width: 100vw;
min-height: 45vw;
overflow: hidden;
}
.panel .content {
position: absolute;
width: 100vw;
min-height: 45vw;
color: #FFF;
}
.panel .description {
width: 25%;
position: absolute;
top: 50%;
transform: translateY(-50%);
text-align: center;
}
.bottom {
background-color: rgb(44, 44, 44);
z-index: 1;
}
.bottom .description {
right: 5%;
}
.top {
background-color: rgb(77, 69, 173);
z-index: 2;
width: 50vw;
/*-webkit-clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);
clip-path: polygon(60% 0, 100% 0, 100% 100%, 40% 100%);*/
}
.top .description {
left: 5%;
}
/* Handle. */
.handle {
height: 100%;
position: absolute;
display: block;
width: 5px;
top: 0;
left: 50%;
z-index: 3;
}
/* Skewed. */
.skewed .handle {
top: 50%;
transform: rotate(30deg) translateY(-50%);
height: 200%;
-webkit-transform-origin: top;
-moz-transform-origin: top;
transform-origin: top;
}
.skewed .top {
transform: skew(-30deg);
margin-left: -1000px;
width: calc(50vw + 1000px);
}
.skewed .top .content {
transform: skew(30deg);
margin-left: 1000px;
}
/* Responsive. */
#media (max-width: 900px) {
body {
font-size: 75%;
}
}
<div class="splitview skewed">
<div class="panel bottom">
<div class="content">
<div class="description">
<h1>My name is John Snow.</h1>
<p>I like making popcorn with icicles alot.</p>
</div>
</div>
</div>
<div class="panel top">
<div class="content">
<div class="description">
<h1>I dream about this girl everyday, but cannot seem to forget her.</h1>
<p>People say not many people can fall in love, and it's good I can experience it, but what is unrequited love worth actually.</p>
</div>
</div>
</div>
<div class="handle"></div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/original-image.jpg" alt="Duotone">
</div>

Answer 2

It can be hard to get two elements exactly lined up when there is some sort of transform or resizing going on because the arithmetic can result in part CSS pixel being required, and that can cause trouble translating to the multiple screen pixels that can make up a CSS pixel on modern, high res screens.
Your spurious line looks like not as wide as a CSS pixel and could be screen pixels 'left behind' during these calculations.
I found your layout quite hard to follow as there were skews and other transforms.
Looking at the layout I wonder if a simpler approach - a 3 column grid with flex used to center items within the panels might suffice? It would make maintenance easier. The skews seemed to be needed for the background 'triangular' shapes and this snippet replaces them with a sloping linear gradient as the content element's background. No skewing or other transforms are required.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
}
.content {
position: absolute;
min-height: 45vw;
width: 100vw;
color: #fff;
text-align: center;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-image: linear-gradient(-60deg, rgb(44, 44, 44) 0, rgb(44, 44, 44) 48%, rgb(77, 69, 173) 48%, rgb(77, 69, 173) 100%);
}
.panel {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.panel .description {
width: 75%;
}
.panel img {
width: 100%;
height: 100%;
object-fit: contain;
/* commented out as I don't understand it's use here box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.15);*/
}
<body>
<div class="content">
<div class="panel">
<div class="description">
<h1>I dream about this girl everyday, but cannot seem to forget her.</h1>
<p>People say not many people can fall in love, and it's good I can experience it, but what is unrequited love worth actually.</p>
</div>
</div>
<div class="panel">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/210284/original-image.jpg" alt="Original">
</div>
<div class="panel">
<div class="description">
<h1>My name is John Snow.</h1>
<p>I like making popcorn with icicles alot.</p>
</div>
</div>
</div>
<div class="handle"></div>
</div>
</body>