多边形的代码方法

来源：互联网发布：淘宝设计工资一般多少编辑：程序博客网时间：2024/05/17 01:42

昨天在学校练习一个页面，好像是漫威的一个网页，在这个里面有一些梯形和平行四变形。当时我就懵逼了这个形状不会阿，班上有一个老司机教了一下，然后我实践了几次发现其实这些图形都是比较简单的。先来一个梯形吧。我先给一个div 在这个div里面什么都不加就给它命一个名字。然后对这个class命一个宽度，不命高度。

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        .head{            width: 100px;        }    </style></head><body><div class="head"></div></body></html>

这是我的代码。现在的话开始讲下梯形，盒模型大家都是知道的，内容content 内边距padding 边框border 外边距margin。这就是一个盒模型，而需要改变一个div的形状为梯形

其实我们就是改变的它的border。具体的值需要去试试或者算出来。我就随便来个值吧。

.head{    width: 100px;    border-bottom: 80px solid blue;    border-right: 30px solid transparent;    border-left: 30px solid transparent;}
首先我给了这个div一个宽度100，然后给了一个border-bottom80，让这个的高度是撑起来整个div的高度，因为我对div是没有设置高度的。给了一个颜色为蓝色，接下来我对它的

右边和左边分为设置了一个30的值，唯一不同的就是我对左右两边设置值的时候，后面跟的颜色是透明色，因为是做梯形的，所以透明色的话就会呈现某一个度没有的样子，

其实是存在的，只是给用户看到是没有的样子，然后梯形就好了。我截图。

梯形的值是可以随意改变的，大家可以试试把一个大块的div改成很多种形状的东西，这个是很好玩的。

接下来是平行四边形，同样我也是给一个div命名 然后设置一些基本数据。

width: 100px;height: 80px;background: navy;
这个不同于梯形的是需要设置一个宽度，一个高度，然后设置一个背景色让它好看一些。接下来就是设置平行四边形，值可以改，看你需要多大的弯度。

.head{    width: 100px;    height: 80px;    background: navy;    transform: skew(-20deg);    margin-left: 300px;}
我给了20 一般就是10左右吧具体看页面吧，然后为了好看一些我给了一个margin-life 把这个图形移到浏览器的中间去了。我放图

好了就ok了。这个是我昨天在学校学到的一个方法，分享一下，也算是给自己留个记忆在这。

0 0