Container Border

container-border.html

 
<style>
/* === DEMO STYLE =========================================== */
.TEXT_FREISTELLER_BGIMAGE.bg-bild-modul {
    background-image: url('http://placehold.it/350x150');
    background-repeat: no-repeat;
    background-position: center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -ms-background-size: cover;
    -o-background-size: cover;
}
.individual-container-outer .nmargin-top {
    margin-top: -70px;
}

.individual-container-outer .margin-bottom {
    margin-bottom: 70px;
}


.individual-container-outer .margin-top {
    margin-top: 70px
}


h3.number {
    padding: 10px 20px;
    background: rgba(0,0,0, .15);
    color: #fff;
    display: block;
    font-weight: normal;
    font-size: 20px;
    width: 54px;
    margin: 0 auto;
    text-align: center;
}

.pouter {
    max-width: 1100px;
    background: rgba(0,0,0, .15);
    padding: 15px 15px 0 15px;
    margin: 20px auto;
}

.pouter p {
    text-align: left;
    padding: 0 0 15px 0;
    margin: 0;
    color: #fff;

}

.pouter p.center {
    text-align: center;
}


/* === BASIS ============================================ */   
.individual-container-outer {
    overflow: hidden;
}

.individual-container-border {
    padding: 70px 0;
    overflow: visible;
}

.individual-container-border:before, 
.individual-container-border:after {
    content: "";
    display: none;
    width: 0;
    height: 0;
    border-left: 100vw solid transparent;
    border-bottom: 80px solid transparent;
    margin-top: -80px;
    position: relative;
}

.individual-container-border:after {
    border-right: 0px solid transparent;
    border-bottom: 0px;
    border-top: 80px solid transparent;
    border-left: 0px;
    border-right: 100vw solid transparent;
    margin-top: 0px;
    margin-bottom: -80px;
}
   
.individual-container-padding {
    padding-top: 70px;
    padding-bottom: 70px;
}

.individual-container-padding-large {
    padding-top: 250px;
    padding-bottom: 250px;
}         

.davor:before {
    display: block;
    top: -70px;
}

.danach:after {
    display: block;
    bottom: -70px;
}

.davor-und-danach:before {
    display: block;
    top: -70px;
}

.davor-und-danach:after {
    display: block;
    bottom: -70px;
}


/* === UMKEHREN ============================================== */
.umkehren.individual-container-border:before {
    border-left:0;
    border-right: 100vw solid transparent;   
}

.umkehren.individual-container-border:after {
    border-right:0;
    border-left: 100vw solid transparent;   
}
          
/* === davor */
.umkehren-davor.individual-container-border:before {
    border-left:0;
    border-right: 100vw solid transparent;   
}

/* === danach */
.umkehren-danach.individual-container-border:after {
    border-right:0;
    border-left: 100vw solid transparent;   
}
  

/* === SPITZE ============================================== */
.spitze.individual-container-border:before,
.spitze.individual-container-border:after {
    border-left:50vw solid transparent;
    border-right:50vw solid transparent;
}

/* davor === */
.spitze-davor.individual-container-border:before { 
    border-left:50vw solid transparent;
    border-right:50vw solid transparent;
}

/* danach === */
.spitze-danach.individual-container-border:after { 
    border-left:50vw solid transparent;
    border-right:50vw solid transparent;
}   


/* === GERADE ============================================== */
.gerade.individual-container-border:before,
.gerade.individual-container-border:after,

/* davor === */
.gerade-davor.individual-container-border:before,

/* danach === */
.gerade-danach.individual-container-border:after { 
    border-left:0;
    border-right:0;
}
    
         
/* === FARBEN ==================================================== */

/* --------------------------------------------------------------- */
.rot                {   background-color:           #dd4499;        }
.rot:before         {   border-bottom-color:        #dd4499;        }
.rot:after          {   border-top-color:           #dd4499;        }
/* --------------------------------------------------------------- */
.blau               {   background-color:           blue;           }
.blau:before        {   border-bottom-color:        blue;           }
.blau:after         {   border-top-color:           blue;           }  
/* --------------------------------------------------------------- */
.orange             {   background-color:           orange;         }
.orange:before      {   border-bottom-color:        orange;         }
.orange:after       {   border-top-color:           orange;         }
/* --------------------------------------------------------------- */
.gruen              {   background-color:           green;          }
.gruen:before       {   border-bottom-color:        green;          }
.gruen:after        {   border-top-color:           green;          }
/* --------------------------------------------------------------- */


/* === ERKLÄRUNG (CSS Klassen) ===================================================================================================================================================

individual-container-border | individual-container-padding | davor/danach/davor-und-danach | umkehren(-davor/-danach) | spitze(-davor/-danach) | gerade(-davor/-danach) | farbe
        - Schräge -             - Innenabstand -                    - Position -                - Style 1: Umkehren -      - Style 2: Spitze -     - Style 3: Gerade -   - Farbe - 
        
================================================================================================================================================================================== */
</style>

 
<div class="individual-container-outer">

    <div class="individual-container-border individual-container-padding orange">
        <div class="margin-bottom">
            <h3 class="number">1</h3>
            <div class="pouter">
                <p class="center"><code>class="individual-container-border individual-container-padding orange"</code></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
                <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.</p>
            </div>   
        </div>
    </div>
 
    <div class="individual-container-border individual-container-padding davor spitze-davor rot">
        <div class="nmargin-top margin-bottom">
                <h3 class="number">2</h3>
                <div class="pouter">
                    <p class="center"><code>class="individual-container-border individual-container-padding davor spitze-davor rot"</code></p>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
                    <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.</p>
                </div>
        </div>
    </div>
    
    <div class="individual-container-border individual-container-padding davor danach spitze gruen">
        <h3 class="number">3</h3>
        <div class="pouter">
            <p class="center"><code>class="individual-container-border individual-container-padding davor danach spitze gruen"</code></p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
            <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.</p>
        </div>
    </div>

    <div class="individual-container-border individual-container-padding-large TEXT_FREISTELLER_BGIMAGE bg-bild-modul">
        <h3 class="number">4</h3>
        <div class="pouter">
            <p class="center"><code>class="individual-container-border individual-container-padding-large TEXT_FREISTELLER_BGIMAGE bg-bild-modul"</code></p>
        </div>
    </div>  
    
    <div class="individual-container-border individual-container-padding danach spitze-danach gerade-davor blau">
        <h3 class="number">5</h3>
        <div class="pouter">
            <p class="center"><code>class="individual-container-border individual-container-padding danach spitze-danach gerade-davor blau"</code><p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
            <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.</p>
        </div>
    </div>
        
    <div class="individual-container-padding orange">
        <div class="margin-top margin-bottom">
            <h3 class="number">6</h3>
            <div class="pouter">
                <p class="center"><code>class="individual-container-padding orange"</code></p>
                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
                <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.</p>
            </div>
        </div>
    </div>        
        
    <div class="individual-container-border individual-container-padding davor spitze-davor rot">
        <h3 class="number">7</h3>
        <div class="pouter">
            <p class="center"><code>class="individual-container-border individual-container-padding davor spitze-davor rot"</code></p>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</p>
            <p>In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a.</p>
        </div>
    </div>
    
</div>