使用 CSS 在 HTML 页面底部插入倾斜元素答案

【问题标题】：Insert a skewed element at the bottom of HTML page using CSS使用 CSS 在 HTML 页面底部插入倾斜元素
【发布时间】：2016-10-21 21:04:58
【问题描述】：

我正在使用一些代码来倾斜页面背景的底部。页面部分如下（这里只是skew函数的代码）：

页面 HTML 代码（部分）：

       <div id="Fleet">
        <div class="section Fleet_section">
            <div class="container">
                <div class="row">
                    <div class="col-lg-12">
                        <h1>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/xxx.jpg">
                          <div class="caption">
                            <h3>xxx</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>

和上面部分的css：

        .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;
       }


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

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

附加的 css 中未显示的其余元素使用引导程序（如行、容器）。

现在我想在底部添加倾斜元素，类似这里的效果： http://www.hongkiat.com/blog/skewed-edges-css/ 你能支持我如何实现它吗？

【问题讨论】：

.section.Fleet:after 这是什么？您的 html 代码中没有这样的元素。并阅读伪元素。你需要两个冒号。 w3schools.com/css/css_pseudo_elements.asp
您好，感谢您发现错误。但是今天我回到主题并在代码顺序和类上进行一些更改。我仍在寻找相同问题的解决方案 - 您可以在顶部找到它已编辑的更正代码。
@danny3b not for :after.

标签： html css skew

【解决方案1】：

#Fleet::after 规则集缺少其} 并且没有display: block;。它也缺乏维度，例如width:100%;height:100%;

【讨论】：