创建一个有角度的 CSS3 分隔线 - 100%/自动高度 [英] Creating an angled CSS3 divider - 100% / Auto height

问题描述

我已经检查了这两篇文章:

I have checked these two posts: Adjacent divs with angled borders? [duplicate] and Shape with a slanted side (responsive) but those solutions posted do not adjust to 100% height of the container and I need this. I cannot find a solution to fit my scenario.

这是我在 jSFiddle 中使用的代码:https://jsfiddle.net/qzma0r6k/1/

I'm trying to replicate this behaviour the difference is the text inside this container can be of any height so I need the angle and container to adapt to fit any height (not a fixed height container):

CSS

Here's the code I'm using with a jSFiddle: https://jsfiddle.net/qzma0r6k/1/

HTML

section {
    position: relative;
    color: #fff;
}
.diagonal:before {
    position: absolute;
    content:'';
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transform-origin: 0 100%;
    transform-origin: 0 100%;
    top: 0;
    right:0;
    height:100%;
    z-index: 0;
    width: 50%;
    background:pink;
}

<div class="bg-image"></div></节>

HTML

推荐答案

类似的事情?

<div class="bg-image"></div></section>

<section class="c-1"> <div class="c-2 diagonal"> <h1> Work with us </h1> <p> Scelerisque et parturient dis a erat cubilia congue sociosqu vel porta sem posuere a malesuada suspendisse id commodo. Dui consequat consectetur luctus odio nibh a vel sapien hendrerit ad a consectetur cursus a nisl posuere. A cubilia varius dapibus non scelerisque aliquam imperdiet nec montes suspendisse orci potenti dignissim vestibulum venenatis sociosqu ullamcorper vestibulum scelerisque magna sem ultricies convallis cras. Ante sed elit tristique interdum hendrerit nascetur a cras suspendisse mi fermentum vestibulum auctor a taciti euismod ac non adipiscing a. Maecenas parturient a dui sodales vestibulum nisl nisi consequat cum lacus lobortis senectus metus at adipiscing cursus parturient a. </p> </div> <div class="bg-image"></div> </section>

这篇关于创建一个有角度的 CSS3 分隔线 - 100%/自动高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！