两个div用对角线分割 - CSS [英] two divs split with diagonal line - CSS

问题描述

我试图获得两个div以适合页面的整个宽度，但用对角线分成两半。

如何实现这两个div通过CSS？

解决方案

它可以是这样的

示例1

  div {min-height：100px;背景：＃D25A1E;位置：相对; 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>   
 
 
 小提琴 
 
 
 
 示例2  
 
 
 
 
 
 
  div {background：＃D25A1E; min-height：100px; width：calc（50％ -  25px）;位置：相对; } .div1 {float：left;}。div2 {float：right;} div：after {position：absolute; top：0px;内容：''; z-index：-1;高度：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>   
 
 
 小提琴 
 
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>





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

                        
这篇关于两个div用对角线分割 -  CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！