Css 倾斜页面背景的底部

我正在使用一些代码来扭曲页面背景的底部。 页面部分如下：

HTML:

其余元素使用引导css（如行、容器）

现在我想有一个在页面底部倾斜，但它不工作。。。 类似的效果如下：

---

你能支持我吗？

#Fleet:：after

规则集缺少其

}

并且没有

显示：块。它还缺少尺寸，例如
宽度：100%；身高：100%
部分。舰队：这是什么？html代码中没有这样的元素。并阅读有关伪元素的内容。你需要两个冒号。嗨，谢谢你发现错误。今天我回到主题，对代码顺序和类做了一些更改。我仍然在寻找同样的isse更正代码的解决方案，你可以在顶部找到它被编辑过。@danny3b
       <div id="Fleet">
        <div class="section Fleet_section">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <h1><?php echo FLEET; ?></h1>
                </div>
            </div>

                <div class="row top-buffer">

                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail Staffinview1 delay0_5s">
                      <img src="./images/xxxx.jpg">
                      <div class="caption">
                        <h3>XXXX</h3>
                      </div>
                    </div>
                  </div>


                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail Staffinview1 delay1s">
                      <img src="./images/yyy.jpg">
                      <div class="caption">
                        <h3>yyy</h3>
                      </div>
                    </div>
                  </div>


                  <div class="col-sm-6 col-md-4">
                    <div class="thumbnail Staffinview1 delay1_5s">
                      <img src="./images/zzz.jpg">
                      <div class="caption">
                        <h3>zzz</h3>
                      </div>
                    </div>
                  </div>

                </div>    
        </div>
        </div>
    </div>

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

       #Fleet  {
           font-size: 1.2em;
           text-align: center;
           background: #0C142b;
       }

       #Fleet::after{
         content: '';
         position: absolute;
         background: inherit;
         z-index: -1;
         bottom: 0;
         transform-origin: left bottom;
         transform: skewY(3deg);


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

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