如何实现下图所示的平行四边形布局效果?
一、skewX的局限
一提到平行四边形,条件反射般的就会想起CSS transform
中的skew()
/skewX()
/skewY()
方法,可以让元素斜切,从而实现平行四边形效果
HTML如下:
<div class="input-x">
<input class="input" placeholder="您的姓名">
</div>
CSS如下,形状的关键就是下面红色高亮的transform:skewX(-10deg)
:
.input-x {
display: inline-block;
position: relative;
z-index: 0;
}
.input-x::before {
content: '';
position: absolute;
left: 0; top: 0; right: 0; bottom: 0;
border: 2px solid #ddd;
background-color: #fff;
border-radius: 4px;
transform: skewX(-10deg);
z-index: -1;
}
.input {
display: block;
padding: 8px 10px;
border: 0;