Using shapes with CSS

Question

Using shapes with CSS

Navigation

#1 by (2 votes)

2

I would like to do a layout in this way, where the green part and the text is done with CSS I used rotate and skew, but could not do it. Could someone help me ??

html5 css

asked by anonymous 29.06.2018 / 18:22

1 answer

Escape HTML inside element code - No jQuery WebSocket giving creation error

score 2 · Accepted Answer

Just put the skew in a pseudo element so it does not wrap the text along with the P where the text is, then you put z-index:-1; to throw that element back to the text .

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    background-image: url(http://unsplash.it/g/600/400);
    background-size: cover;
    display: flex;
    align-items: center;
}
section {
    width: 100%;
    height: auto;
    padding: 1em 2em;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    font-family: sans-serif;
    font-weight: bold;
}
section::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: teal;
    transform: skewY(5deg);
}
p {padding: 2em;}

<section>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Culpa quam, nobis a voluptatum, aperiam natus placeat similique porro aspernatur delectus sequi, molestias sint architecto blandi</p>
</section>