我想像这样创建HTML布局
Pixbuf
property
我尝试使用一些css代码使元素非矩形,但到目前为止没有运气:)。
我看到这篇文章: https://dribbble.com/shots/2136656-Minions-Promo/attachments/393961 但在那里找不到答案:)
任何人都知道如何构建这个东西?
由于
答案 0 :(得分:2)
您可以使用:pseudo
元素添加背景并使用skew
属性
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.red {
padding: 15px;
position: relative;
color: white;
margin-bottom: 50px;
}
.red:after {
content: '';
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
background: tomato;
z-index: -1;
transform: skew(0deg, 2deg);
}
.blue {
position: relative;
padding: 15px;
}
.blue:after {
content: '';
position: absolute;
bottom: 0;
top: 0;
right: 0;
left: 0;
background: cornflowerblue;
z-index: -1;
transform: skew(0deg, -2deg);
}

<div class="red">
<h1>Sed augue ipsum egestas</h1>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus aliquet elit ac nisl. Donec id justo. Praesent turpis.</p>
<p>Integer tincidunt. Fusce convallis metus id felis luctus adipiscing. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero.</p>
<p>Pellentesque posuere. Nam pretium turpis et arcu. Etiam imperdiet imperdiet orci. Quisque id mi.</p>
</div>
<div class="blue">
<h1>Sed augue ipsum egestas</h1>
<p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Vivamus aliquet elit ac nisl. Donec id justo. Praesent turpis.</p>
<p>Integer tincidunt. Fusce convallis metus id felis luctus adipiscing. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Vestibulum volutpat pretium libero.</p>
<p>Pellentesque posuere. Nam pretium turpis et arcu. Etiam imperdiet imperdiet orci. Quisque id mi.</p>
</div>
&#13;
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.yellow {
margin: 80px 0;
padding: 15px;
background: yellow;
position: relative;
}
.yellow:before,
.yellow:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
background: yellow;
z-index: -1;
}
.yellow:before {
top: -40px;
transform: skew(0, 3deg);
}
.yellow:after {
bottom: -40px;
transform: skew(0, -3deg);
}
&#13;
<div class="yellow">Fusce fermentum odio nec arcu. Nullam accumsan lorem in dui. Nullam accumsan lorem in dui. Cras varius. Morbi mollis tellus ac sapien. Cras dapibus. Fusce pharetra convallis urna. Fusce a quam. Maecenas ullamcorper, dui et placerat feugiat, eros pede
varius nisi, condimentum viverra felis nunc et lorem. Phasellus consectetuer vestibulum elit. Aliquam lobortis. Cras ultricies mi eu turpis hendrerit fringilla.</div>
&#13;