Two Images Background Inline Separate by Diagonal Border

Two images background inline separate by diagonal border

You can use a clip path

.right {  position: absolute;  left: 0;  top: 0;  -webkit-clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);  clip-path: polygon(60% 0, 100% 0%, 100% 100%, 40% 100%);}
.left {  position: absolute;  left: 0;  top: 0;  -webkit-clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);  clip-path: polygon(0 0, 60% 0, 40% 100%, 0 100%);}
border {  position: absolute;  left: 0;  top: 0;  width: 400px;  height: 300px;  background-color: black;  -webkit-clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);  clip-path: polygon(59% 0, 61% 0, 41% 100%, 39% 100%);}

<img class="left" src="https://picsum.photos/400/300?random"><img class="right" src="https://picsum.photos/400/300"><border>

5 images symmetrically seperated with diagonal lines

No need to use positioned element, you can simplify like this and use background-position to center the element:

.container {  display: flex;  height: 150px;  margin: 0 30px;}
.box {  flex: 1;  border: 1px solid;  transform: skew(-25deg);  position: relative;  overflow: hidden;}
.box:after {  content: "";  position: absolute;  top: 0;  bottom: 0;  left: -50%;  right: -50%;  transform: skew(25deg);  background-image: var(--i);  background-position: center;}

<div class="container">  <div class="box" style="--i:url(https://lorempixel.com/400/200/)"></div>  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>  <div class="box" style="--i:url(https://lorempixel.com/300/200/)"></div>  <div class="box" style="--i:url(https://lorempixel.com/400/300/)"></div>  <div class="box" style="--i:url(https://lorempixel.com/200/300/)"></div></div>

Diagonal split screen images

Use clip-path instead. Here is a basic example where I kept only the relevant styles (you can add the hover effect and the button styles easily)

.wrapper {
  height: 100vh;
  display: flex;
}

.wrapper section {
  flex: 1;
  display: flex;
}

.wrapper section .button {
  margin: auto;
  font-size:20px;
  padding: 10px 15px;
  background: #000;
  color: #fff;
}

.wrapper section:first-child {
  background: url(https://picsum.photos/id/1016/800/800) center/cover;
}

.wrapper section:last-child {
  margin-left: -10vw;
  clip-path: polygon(10vw 0, 100% 0, 100% 100%, 0 100%);
  background: url(https://picsum.photos/id/1064/800/800) center/cover;
}

body {
  margin: 0;
}

<main class='wrapper'>
  <section>
    <a class='button' href='#'>Codepen</a>
  </section>
  <section>
    <a class='button' href='#'>Github</a>
  </section>
</main>

Diagonal border line with (inline) CSS

Here's a copy of your image using the linear-gradient CSS approach. MUCH less markup required :)

div#wrapper {  float: left;  width: 220px;  height: 220px;  margin: 0px;}
div#wrapper div {  width: 100px;  height: 100px;  float: left;  background: red;  margin: 0px 10px 10px 0px;}
div#wrapper #d1 {  background-image: repeating-linear-gradient(145deg, black, black 60px, white 60px, white 80px);}
div#wrapper #d4 {  background: black;}

<div id="wrapper">  <div id="d1"></div>  <div id="d2"></div>  <div id="d3"></div>  <div id="d4"></div></div>

Not able to show image in Diagonally split html page.Please check the code and let me know the issue

I suggest a slightly different approach because you want to be sure that your text etc within the left block will fit whatever the viewport width. One way of ensuring this is to have the left hand block at width 50% less 10vh. i.e. not try the complicaed business of getting text to fit within a sloping side.

This snippet gives the whole page the pale background color, the left block sized as above and the right block it gives width 50% plus 10vh and clips it (polygon is slightly altered to make it correct for this width).

body {
  margin: 0;
  font-size: 2em;
}

#landing-area {
  width: 100vw;
  height: 100vh;
  background-color: #F4FCFF;
  position: relative;
}

#box-left {
  width: calc(50% - 10vh);
  padding: 5px 11vh 5px 5px;
  text-align: center;
  display: inline-block;
  height: 100%;
  box-sizing: border-box;
}

#box-right {
  width: calc(50% + 10vh);
  clip-path: polygon(10vh 0, 100% 0, 100% 100%, 0 100%);
  padding: 5px 5px 5px 11vh;
  text-align: center;
  background-image: url(https://picsum.photos/id/131/1024/768?blur=2);
  background-size: cover;
  background-position: center center;
  display: inline-block;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
}

#middle-text {
  height: 200px;
  width: 400px;
  position: fixed;
  top: 50%;
  left: 25%;
  margin-top: -100px;
  margin-left: -200px;
}

<div id="landing-area">
  <div id="box-left">
    <div id="middle-text">
      <img src="images/logo.png">
      <h>Header goes here</h>
      <p>4 line paragraph goes here</p>
      <button>Button name</button></div>
  </div>
  <div id="box-right">
  </div>
</div>

left aslope picture in css

Use Clip-path:

Here's the Clip-path editor: https://bennettfeely.com/clippy/

Here's the code:

img {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
}

<img src="https://via.placeholder.com/200">

Diagonal cut images with offset, working on all screen sizes

simplify your clip-path and control the background-position to create the top and bottom spaces:

.box {
  display: flex;
  height: 400px;
}

.box>div {
  flex: 1;
}

.box>div:first-child {
  margin-right: -10vw;
  background: url(https://picsum.photos/id/1018/800/800) top 50px center /cover no-repeat;
  clip-path: polygon(0 0, 100% 0, calc(100% - 20vw - 5px) 100%, 0 100%);
}

.box>div:last-child {
  margin-left: -10vw;
  background: url(https://picsum.photos/id/125/800/800) bottom 50px center /cover no-repeat;
  clip-path: polygon(calc(20vw + 5px) 0, 100% 0, 100% 100%, 0 100%);
}

<div class="box">
  <div></div>
  <div></div>
</div>

---

Related Topics