两个 div 用对角线分割 - CSS

问题描述

我试图让两个 div 适合页面的整个宽度，但用对角线分成两半.

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

如何通过 CSS 使用两个 div 来实现这一点?这是一个滑块，完成后需要将内容添加到每个部分

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

推荐答案

可以是这样的

示例 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>

小提琴

示例 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>

小提琴

示例 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>

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