Pochylenie dolnej części tła - prawy dolny naroznik

Witam mam stronę - a dokładnie sekcję strony zdefiniowaną w następujący sposób:

<div id="Fleet" class="section Fleet_section">
            <div class="container ">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>flota</h1>
                    </div>
                </div>
                 
                    <div class="row">
                        
                      <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                          <img src="./images/photo_front_page.jpg" alt="Dash">
                          <div class="caption">
                            <h3>Bombardier Dhd8</h3>
                          </div>
                        </div>
                      </div>
                    

                      <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                          <img src="./images/photo_front_page.jpg" alt="Boeing 737">
                          <div class="caption">
                            <h3>Boeing 737</h3>
                          </div>
                        </div>
                      </div>


                      <div class="col-sm-6 col-md-4">
                        <div class="thumbnail">
                          <img src="./images/777.jpg" alt="Boeing 777">
                          <div class="caption">
                            <h3>Boeing 777</h3>
                          </div>
                        </div>
                      </div>
                        
                    </div>              
            </div>
        </div>
 

i css:

.section{
    width: 100%;
    height: 100%;
    padding-top: 80px;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background: #fff;
    }

.Fleet_section {
    font-size: 1.2em;
    text-align: center;
}

.section.Fleet:after {
    content: '';
    width: 100%;
    height: 80%;
   // position: absolute;
    background: #0C142b;
    z-index: -1;
    bottom: 0;
    transform-origin: right bottom;
    transform: skewY(-3deg);
  
}

.thumbnail {
    border: 1px solid #0C142b;
}

.thumbnail>img, .thumbnail a>img {
    margin-right: auto;
    margin-left: auto;
    border-radius: 4px;
}

reszta elementów - row i container wykorzystuje bootstrap.

Teraz chciałem za pomocą .section.Fleet:after zrobić pochylenie tła ale ni jak nie mogę tego uzyskać.. możne mi ktoś pomoc?

próbowałem wykorzystać kod ale nie działa...

http://www.hongkiat.com/blog/skewed-edges-css/

Jak już to powinno być:

.section#Fleet:after

CeKa napisał(a):

Jak już to powinno być:

.section#Fleet:after

Nie działa niestety :(

a tak?

 .section#Fleet:after {
    content: '';
    width: 100%;
    height: 80%;
    position: absolute;
    background: inherit;
    z-index: -1;
    bottom: 0;
    transform-origin: right bottom;
    transform: skewY(-3deg);
}