多语言展示
当前在线：637今日阅读：16今日分享：13

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

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

2

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

标签。如图：

3

添加样式标签。在代码页面上找到标签,在这个标签后添加<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>平行四边形   

推荐信息
网站地图 XML TXT RSS 隐私政策 服务条款 使用条款
Copyright ©1996-2026 www.onijiang.com Corporation, All Rights Reserved