Two Divs Split with Diagonal Line - CSS

Split two div text with a diagonal line

fiddle: https://jsfiddle.net/avakqez9/1/

<div class="one">
  <h1>The Jocky</h1>
</div>
<div class="two">
  <h1>of Mocky</h1>
</div>

CSS

div{
  vertical-align: middle;
  display: inline-block;
}

.one{
  overflow: hidden;
  margin-top: -1px;
  transform: rotate(10deg);
  border-right: 1px solid #000;
}

.one h1 {
  margin-right: -20px;
  transform: rotate(-10deg);
}

.two h1{
  color: orange;
  margin: 40px 0 0 -10px;
}

Split div with diagonal line

You can do it with a pseudo element rotated like this:

body {

  background-color: #00bcd4;

}

.main {

  margin: 50px;

  overflow: hidden;

  position: relative;

  width: 350px;

}

.image {

  background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat;

  background-size: cover;

  height: 200px;

}

.text {

  background-color: white;

  padding: 30px;

  position: relative;

}

.text > div {

  position: relative;

  z-index: 1;

}

.text:before {

  content: "";

  background-color: white;

  position: absolute;

  height: 100%;

  width: 120%;

  top: -20px;

  left: -10%;

  transform: rotate(5deg);

  z-index: 0;

}

<div class="main">

  <div class="image"></div>

  <div class="text">

    <div>

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae gravida purus. Ut quis elit magna. Fusce et mattis sapien. Sed venenatis magna ut ligula facilisis, eget vulputate neque aliquet. Nulla lacinia condimentum leo non aliquet. Integer

      et enim dapibus, tempor ipsum non, fringilla enim. Cras semper fermentum dolor, at pharetra dolor ornare sit amet. Morbi eu dictum orci, tincidunt pretium nisi. Sed finibus vulputate eleifend. Nulla ac leo facilisis, fermentum tellus in, feugiat

      risus. Curabitur in sem luctus, pellentesque justo nec, aliquet velit. Nam euismod est sit amet ultrices consequat.

    </div>

  </div>

</div>

Split diagonally div in 3 divs

Hope it works for you.

If want pure CSS solution, you can try this.
It uses Area of Traingle and all other calculations.
I have given width: 300px;height:600px; to parent DIV and then done the calculations. You may need to change accordingly.
I use SCSS for writing my CSS, so its easy for me. Though I have tried to do more of calculation using calc to make it more CSS friendly.

.parent {

  position: relative;

  width: 300px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  height: 600px;

  /* Not relevant. this was used to show a Guide-point of intersection of one of triangle's side. 

  &:before {

    content: '';

    width: 2px;

    height: 2px;

    background: #000;

    position: absolute;

    left: calc(50% - 1px);

    top: -1px;

    display: block;

  }

  &:after {

    content: '';

    width: 2px;

    height: 2px;

    background: #000;

    position: absolute;

    left: calc(50% - 1px);

    bottom: -1px;

    display: block;

  }

  */

}

.child {

  min-height: 20px;

  padding: 15px;

  transform: skewY(-30deg);

  transition: all 0.2s ease;

  display: flex;

  align-content: center;

  align-items: center;

}

.child:hover {

  height: calc(100% - 40px);

}

.child:hover~.child {

  height: 20px;

}

.child__inner {

  transform: skewY(30deg);

  color: #fff;

}

.child--top {

  background: tomato;

  height: calc(50% - 20px);

  margin-top: calc((150px / 1.73)* -1);

  padding-top: calc((150px / 1.73) * 2);

}

.child--middle {

  background: DeepSkyBlue;

}

.child--bottom {

  background: MediumSeaGreen;

  height: calc(50% - 20px);

  margin-bottom: calc((150px / 1.73)* -1);

  padding-bottom: calc((150px / 1.73) * 2);

}

<div class="parent">

  <div class="child child--top">

    <div class="child__inner">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus, accusantium. Illo minima ipsa, at dignissimos perspiciatis nesciunt. Hic quae porro assumenda possimus fugit, velit eaque magni, reiciendis veritatis perspiciatis recusandae?

    </div>

  </div>

  <div class="child child--middle">

    <div class="child__inner">

    </div>

  </div>

  <div class="child child--bottom">

    <div class="child__inner">

    </div>

  </div>

</div>

Two-tone background split by diagonal line using css

Here are the examples in action: http://jsbin.com/iqemot/1/edit

You can change the placement of the diagonal line with the border pixels. With this approach you would have to position content over the background setup however.

#container {

  height: 100px;

  width: 100px;

  overflow: hidden;

  background-image: url(http://www.webdesign.org/img_articles/14881/site-background-pattern-07.jpg);

}

#triangle-topleft {

  width: 0;

  height: 0;

  border-top: 100px solid gray;

  border-right: 100px solid transparent;

}

<div id="container">

  <div id="triangle-topleft"></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>

---

Related Topics