用CSS编写多种常见的图形

用CSS编写多种常见的图形

正方形与长方形

这个是最简单的，直接上代码

等腰三角形

上面代码会看到四个等腰三角形，把其余三个颜色改为透明即可

.div{
    height: 0;
    width: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent transparent pink transparent;
}

等边三角形

等边三角形的关键比例是1:1.732

上面代码中173.2px这部分的三角形就是等边三角形

圆形

一个正方形再加上border-radius: 50%;就可以了

椭圆

长方形加上border-radius: 50%即可

圆角矩形

长方形加上border-radius进行调整即可

中间透明的规则图形

图形的背景透明，再加上边框颜色即可，以圆形为例

直角梯形

margin三个参数时分别代表，上，左右，下

改变下面代码的第二和第三个参数

border-width: 0px 10px 10px 0px;

第二个参数是直角梯形的倾斜度，第三个是高度，同样也会影响倾斜度，这个自己去调试一下会更直接明白。

如果将宽度设置为0px的话，将会成为一个直角三角形，再加那两个参数可以写出任何直角三角形，不再局限于等腰三角形和等边三角形。

任意直角三角形的CSS代码

div{
    width: 0px;
    border-width: 0px 100px 100px 0px;
    border-style: none solid solid;
    border-color: transparent transparent #111;
}

等腰直角

任意三角形

在等腰梯形的基础上，将宽度设为0，再改变border-width的那三个三数，可以调整出各种内角和为180的三角形。

一个比较有意思的图形

扇形

平行四边形