Divide CSS styling [duplicate]

Question

Divide CSS styling [duplicate]

Navigation

#1 by (1 votes)

3

I'd like to know how you can customize the div to make it "cross", as in the image below, where the top-left and bottom-left of the orange div are half cut.

html css front-end

asked by anonymous 10.07.2016 / 16:08

1 answer

XAMPP is not working properly [closed] Integration between R and Java

score 1 · Accepted Answer

You can do it this 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>