最近打算用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
,所有文字内容就会表现为倾斜
要恢复文字的直立需要额外添加一个盒子来修改文字