2

inserir a descrição da imagem aqui

Gostaria de fazer um layout dessa forma, onde a parte verde e o texto seja feito com CSS utilizei rotate e skew, mas não consigui fazer. Alguém poderia me ajudar??

1
  • Seria interessante vc incluir seu código na reposta pq além do exemplo o mais interessante seria te falar pq o seu código não está dando certo.
    – hugocsl
    Commented 29/06/2018 às 17:07

1 Resposta 1

2

Basta colocar o skew em um pseudo elemento para ele não entortar o texto junto com o P onde está o texto, depois vc coloca o z-index:-1; para jogar esse elemento para traz do texto.

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>

1
  • 1
    Obrigado @hugocsl deu certo o/ Commented 29/06/2018 às 17:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .