I am trying to get two divs to fit the full width of the page but split in half with a diagonal line.
How can I achieve this with two divs through CSS? it is for a slider and needs content added to each part when finished
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>
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>
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>