Css3 Slanted Div with Background Image, with Image Behind the Whole Thing

Create a slanted edge to a div

You can use a skewed pseudo element to make the slanted solid background of your element. This way, the text won't be affected by the transform property.

The transform origin property allows the pseudo element to be skewed from the right bottom corner and the overflowwing parts are hidden with overflow:hidden;.

The pseudo element is stacked behind the content of the div with a negative z-index:

div {  position: relative;  display: inline-block;  padding: 1em 5em 1em 1em;  overflow: hidden;  color: #fff;}
div:after {  content: '';  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%;  background: #000;  -webkit-transform-origin: 100% 0;  -ms-transform-origin: 100% 0;  transform-origin: 100% 0;  -webkit-transform: skew(-45deg);  -ms-transform: skew(-45deg);  transform: skew(-45deg);  z-index: -1;}
body {  background: url('https://farm3.staticflickr.com/2878/10944255073_973d2cd25c.jpg');  background-size: cover;}

<div>slanted div text</div><div>  slanted div text<br/> on several lines<br/> an other line</div><div>wider slanted div text with more text inside</div>

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>

Creating slanted edges for 50% columns with an image behind

my solution

Figuring out how to get it responsive is up to you =)

draw diagonal lines in div background with CSS

You can do it something like this:

<style>
    .background {
        background-color: #BCBCBC;
        width: 100px;
        height: 50px;
        padding: 0; 
        margin: 0
    }
    .line1 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid red;
        -webkit-transform:
            translateY(-20px)
            translateX(5px)
            rotate(27deg); 
        position: absolute;
        /* top: -20px; */
    }
    .line2 {
        width: 112px;
        height: 47px;
        border-bottom: 1px solid green;
        -webkit-transform:
            translateY(20px)
            translateX(5px)
            rotate(-26deg);
        position: absolute;
        top: -33px;
        left: -13px;
    }
</style>
<div class="background">
    <div class="line1"></div>
    <div class="line2"></div>
</div>

Here is a jsfiddle.

Improved version of answer for your purpose.

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>