最近打算用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,所有文字内容就会表现为倾斜

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

技术
今日推荐
阅读数 7017
阅读数 2018
阅读数 1515
阅读数 1303
阅读数 1303
阅读数 1134
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信