css如何制作平行四边形

小伙伴们知道css可以制作平行四边形吗？让我们一起来看看怎么做吧。制作平行四边形需要使用到 transform的skew进行设置语法：div{transform:skew(-30deg); /*设置倾斜度为-30*/ }

方法/步骤

新建html页面。打开hmtl编辑器，新建一个html页面。如图：

添加div标签在html页面上找到标签，在标签里新建一个

标签。如图：

添加样式标签。在代码页面上找到标签,在这个标签后添加<style type='text/css'></style>标签。如图：</p></div><div class="listcon"><span>4</span><p>设置平行四边形样式类。在<style>标签里新建一个 .parallelogram{} 样式类，在这个样式类中设置div的宽、高、倾斜度、背景色、外边框。代码为：.parallelogram { width: 200px; height: 120px; transform:skew(-30deg); -webkit-transform: skew(-30deg); -moz-transform: skew(-30deg); -o-transform:skew(-30deg); -ms-transform:skew(-30deg); background-color: red; margin: 50px auto; }</p></div><div class="listcon"><span>5</span><p>引用样式类在<div>标签中添加 class='parallelogram',即可把样式类添加到div上。如图：</p></div><div class="listcon"><span>6</span><p>查看效果把html文件保存后使用浏览器打开，就可以看到平行四边形的效果。如图：</p></div><div class="listcon"><span>7</span><p>实现平行四边形的所有代码：<!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>平行四边形

上一篇：绘制四边形的广义内心（网络画板）

下一篇：九巧板如何拼成大平行四边形图形

推荐信息

欧尼酱

css如何制作平行四边形