9

I am trying to get two divs to fit the full width of the page but split in half with a diagonal line.

example of what i want it to look like

How can I achieve this with two divs through CSS? it is for a slider and needs content added to each part when finished

5kud
  • 327
  • 2
  • 6
  • 19
  • What did you try so far? – Gibbs Jul 09 '15 at 08:59
  • You should have a look at [this answer](http://stackoverflow.com/questions/30441122/shape-with-a-slanted-side-responsive/30441123#30441123). Using a combination of the examples where there is a slant on the left side and on the right side, you can achieve what you need. Please try and update the question if you get stuck while doing. – Harry Jul 09 '15 at 09:05
  • https://jsfiddle.net/z5fogus5/ i just need the split in the centre to be diagonal – 5kud Jul 09 '15 at 09:09

2 Answers2

18

It can be something like this

Example 1

div {
    min-height: 100px;
    background: #D25A1E;
    position: relative;
    width: calc(50% - 30px);
}
.div1 {
    float: left;
}
.div2 {
    float: right;
}
.div1:after, .div2:before {
    content:'';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
}
.div1:after {
    left: 100%;
    border-top: 100px solid #D25A1E;
    border-right: 50px solid transparent;
}
.div2:before {
    right: 100%;
    border-bottom: 100px solid #D25A1E;
    border-left: 50px solid transparent;
}
<div class="div1"></div>
<div class="div2"></div>

fiddle

Example 2

div {  
    background: #D25A1E;
    min-height: 100px;
    width: calc(50% - 25px);
    position: relative;     
}
.div1 {
    float: left;
}
.div2 {
    float: right;
}
div:after {
    position: absolute; top: 0px;
    content:'';    
    z-index: -1;
    height: 100%;
    width: 50%;
    background: #D25A1E;
}
.div1:after {    
    right: 0;
    transform-origin: bottom right;
    transform: skewX(-20deg);
}
.div2:after {    
    left: 0;
    transform-origin: top left;
    transform: skewX(-20deg);
}
<div class="div1"></div>
<div class="div2"></div>

fiddle

Example 3

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.blocks {
  display: flex;
  padding: 1em;
}

.block {
  background-color: #D25A1E;
  min-height: 100px;
  width: 50%;
  width: calc(50% + 2rem);
}

.block--left {
  clip-path: polygon(0 0, 100% 0, calc(100% - 3rem) 100%, 0% 100%);
}

.block--right {
  margin-left: -2rem;
  clip-path: polygon(3rem 0, 100% 0, 100% 100%, 0% 100%);
}
<div class="blocks">
  <div class="block block--left"></div>
  <div class="block block--right"></div>
</div>
Dmitriy
  • 4,475
  • 3
  • 29
  • 37
  • Great answer. I was just doing something similar. If you do all values in `em` it auto-adjusts to font size - [**My Demo**](http://codepen.io/Paulie-D/pen/WvJwpP) – Paulie_D Jul 09 '15 at 09:25
  • Thanks for this. Did not actually use the way you did but helped get a rough idea – mukolweke Jun 26 '21 at 18:08
0
<div class="container">
  <div class="left"><span>left</span></div>
  <div class="right"><span>right</span></div>
</div>

.container {
  display: flex;
  flex-direction: row;
  color: white;
  font-family: system-ui;
  font-size: 2rem;
  overflow: hidden;
  margin: 0 auto;
}

.left,
.right {
  width: 50%;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left {
  position: relative;
}

.left::after {
  content: "";
  position: absolute;
  background: blue;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  transform: skew(-25deg);
  z-index: 10;
}

.right {
  position: relative;
  text-align: right;
}

.right::before {
  content: "";
  position: absolute;
  background: red;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100vw;
  transform: skew(-25deg);
  z-index: 10;
}

span {
  z-index: 20;
}

https://codepen.io/xiaogwu/pen/XWoKQzw?editors=1100

xiaogwu
  • 81
  • 6