對角線分割div

Question

如何將對角線分割成2個部分（都包含水平文本）？

例如看到這其中1具有矩形背景圖像和2具有文本與背景色：

Answer 1

你可以用一個僞元素做旋轉這樣的：

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>

Answer 2

據我所知，它不能直接使用任何單一的CSS屬性，你將不得不通過使用僞元素來破解它，或者最好的方法將使用SVG

.container { 
 
    width: 90%; 
 
    margin: 0 auto; 
 
} 
 
.box { 
 
    width: 200px; 
 
    height: 150px; 
 
    text-align: center; 
 
} 
 
.box-1 { 
 
    background: #ff6347; 
 
} 
 
.box-2 { 
 
    background: #0ff; 
 
} 
 
.box-2:before { 
 
    display: inline-block; 
 
    margin: 0; 
 
    margin-top: -30px; 
 
    margin-left: -30px; 
 
    content: ''; 
 
    border: 30px solid transparent; 
 
    border-right: 200px solid #0ff; 
 
}

<div class="container"> 
 
    <div class="box box-1"></div> 
 
    <div class="box box-2"> 
 
     TITLE 1 
 
    </div> 
 
</div>