css-绘制平行四边形

最近打算用vue仿制一个游戏的页面

其中的一个场景如下

大概的思路是使用position：fixed固定角落的按钮

使用flex布局制作章节选择

难度在于如何绘制平行四边形的盒子，还要保证背景图不会倾斜

1.rotate

最初的想法是通过旋转+隐藏超出部分的方法来制作，在操作过程中发现很麻烦，而且做出来并不美观，会出现很多布局上的问题。

2.skew斜切

使用斜切属性可以使盒子发生倾斜

<div class="input-x">
    <input class="input" placeholder="您的姓名">
</div>

.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)  !important;  
    z-index: -1;    
}
.input {
    display: block;
    padding: 8px 10px;
    border: 0; background: none;
}

 整段文字内容也按照平行四边形的格式进行了排版，如果文字内容也应用skewX，所有文字内容就会表现为倾斜

要恢复文字的直立需要额外添加一个盒子来修改文字