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

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

css-绘制平行四边形相关推荐

CSS绘制平行四边形
方法有三: (1).父元素transform: skewX(-45deg);子元素transform: skewX(45deg); 效果图1: <!DOCTYPE html> <ht ...
使用CSS绘制一个平行四边形
使用CSS绘制一个平行四边形,这里使用的主要属性是 transform: skew(15deg),相当于对元素进行旋转,不过IE9 一下是不支持的,如果需要向下兼容,建议使用四边形图片代替.使用CSS ...
用CSS绘制最常见的40种形状和基本图形
今天在国外的网站上看到了很多看似简单却又非常强大的纯CSS绘制的图形,里面有最简单的矩形.圆形和三角形,也有各种常见的多边形,甚至是阴阳太极和网站小图标,真的非常强大,分享给大家. Square(正方 ...
css绘制不规则图形
CSS绘制不规则图形在实际开发中,经常会遇到绘制图形(图标)的需求,比如:箭头图表.不规则图形.规则图形: 常见方法对于图形的实现,可以大体上分为几种做法 (1) 背景图片,请UI小姐姐帮你吧-- ...
html 如何改变图片形状,用css绘制各种形状
原标题:用css绘制各种形状自适应的椭圆 1.自适应的椭圆实现方式是通过border-radius这个属性:border-radius它可以单独指定水平和垂直半径.用 / 分隔这两个值.并且该属性 ...
css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
CSS 魔法系列：纯 CSS 绘制基本图形（圆、椭圆等）
我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 CSS3 的广泛使用,更多新奇的 CSS 作品涌现出来. ...
html css右下角三角形,纯CSS绘制三角形（各种角度）
CSS/HTML 的纯CSS绘制三角形(各种角度) 我们的网页因为 CSS 而呈现千变万化的风格.这一看似简单的样式语言在使用中非常灵活,只要你发挥创意就能实现很多比人想象不到的效果.特别是随着 C ...
三角形css_使用css绘制三角形
好看的前端网页大家见到的应该都不少但是很多都是用图片作为背景今天我们就给大家讲讲怎么用css绘制图形 (图形如下) ---------------------------------------- ...
CSS绘制放大缩小关闭按钮
如上图所示,使用CSS 绘制上述三个按钮: <template><div class="windowAction"><button class=&qu ...

css-绘制平行四边形

1.rotate

2.skew斜切

css-绘制平行四边形相关推荐

最新文章

热门文章