Stylization of div in CSS

Asked

Viewed 5,269 times

3

I would like to know how it is possible to customize the div to let it "cross" as well as in the image below, where the top-left and the bottom-left of the orange div are kind of cut.

Perceba a que o a div laranja fica meio que "atravessada" na página

html css front-end

1 answer

0


You can do it that way:

            .trap_section{
                position: relative;
                width: 500px;
                border: none;
                margin-top: 100px;
            }
            #trap_top1{
                position: absolute;
                top: -80px;
                border-top: 80px solid transparent;
                border-right-width: 500px; border-right-style: solid; border-right-color: rgb(255, 137, 91);
            }
            #trap_bottom1{    
                position: absolute;
                bottom: -80px;
                border-bottom: 80px solid transparent;
                border-right-width: 500px; border-right-style: solid; border-right-color: rgb(255, 137, 91);
            }
            #section1{
                background: #FF895B;
                color: #FFFFFF;
                margin: 0 auto;
                overflow-y: hidden;
                height: 200px;
            }
            h1, p{text-align:center;}
    <div class="trap_section">
        <div id="trap_top1" style=""></div>
        <div id="section1">
          <div class="indent">
            <div>
              <h1>MEU TÍTULO</h1>
              <p>MEU CONTEÚDO</p>
            </div>
          </div>
        </div>
        <div id="trap_bottom1" style=""></div>
    </div>

Browser other questions tagged html css front-end

You are not signed in. Login or sign up in order to post.