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，所有文字内容就会表现为倾斜

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

• « 上一篇：第十三届蓝桥杯软件类省赛C/C++大学B组
• » 下一篇：【PPP协议是哪一层协议？】