小编use*_*498的帖子

我正在尝试制作以下倾斜的div.我几乎达到了下面的形状,但是底部并没有像我下面的形状那样在正确的方向上倾斜.我怎么能纠正这个？

形状附加

http://jsfiddle.net//fgdcq3qp/

CSS

.slanted {
background: red;
box-sizing: border-box;
height: 40vh;
width: 100%;
position: relative;
padding: 20px;
}

.slanted:before {
content: "";
background: red;
height: 40px;
transform: skewY(2deg);
position: absolute;
left: 0;
right: 0;
z-index: -1;
}

.slanted:after {
content: "";
background: red;
height: 40px;
transform: skewY(1deg);
position: absolute;
left: 0;
right: 0;
z-index: -1;
}

.slanted:before{    
top: -20px;    
}

.slanted:after {
bottom: -30px;
}

HTML

<div class="slanted">
<h2>Hello World!</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis …

我有以下布局，这只是一个例子，它会随着页面的变化而变化。

我需要做的是将 2 个不同的 CSS 类添加到每个具有该类已经垂直填充并且必须有一个 ID 的 div。

这样我就可以使每个具有 ID 的 div 的背景颜色同步，灰色，白色，灰白色。如果他们没有 ID，他们不应该分配一个白色或灰色的类：随着 ID 的数量从页面到页面变化，我需要某种类型的 jQuery 函数来以编程方式为奇数或偶数或那些添加白色和灰色背景是的，一排没有。但 DIV 的必须已经和 ID。

例如：

.grey-bg {
    background-color: grey;
}

.white-bg {
    background-color: white;
}

<article id="55" class="post-55">
    <div class="entry-content">
        <div class="row-main">
            <div class="fl-row vertical-padding" id="welcome">1</div>
            <div class="fl-row vertical-padding" id="welcome-2">2</div>
            <div class="fl-row vertical-padding">3</div>
            <div class="fl-row vertical-padding">4</div>
            <div class="fl-row vertical-padding"id="hello">5</div>
            <div class="fl-row vertical-padding" id="welcome">6</div>
            <div class="fl-row vertical-padding">8</div>
            <div class="fl-row vertical-padding">9</div>
            <div class="fl-row vertical-padding" id="welcome-4">7</div>
            <div class="fl-row vertical-padding"id="hello">10</div>
        </div>
    </div>
</article>