css画三角形画各种角度的三角形
工具/原料
任意一款顺手的编辑器
div+css
方法/步骤
1、在绘制三角形前，我们需要了解一下cssborder的设置。border是一个简写杨钭维程属性，border-top、border-right、border-bott泠贾高框om、border-right四个边框组成。语法：border:border-widthborder-styleborder-color|inherit;图中的效果：border-color:redgreenblackyellow;border-style:solid;border-width:100px;等价于：border-top:100pxsolidred;border-right:100pxsolidgreen;border-bottom:100pxsolidblack;border-left:100pxsolidyellow;
2、通过上面的例子，我们了解到了border由四个方向的边组成（上-右-下-左），在元素widht、heigth都为0是各个方向的border就三角形；如果width或heigth不为0，效果如下。heigth不为0，左右两侧就是梯形；widht不为0，上下两侧就是梯形；
3、下面我们来画三角形，首先坟贸沂鹎锐角三角形；.triangle{height:0;width:0;bord髫潋啜缅er-color:transparenttransparentblacktransparent;border-style:solid;border-width:0px100px200px100px;}原理：只允许一边有颜色，其他三边设置透明色；边的宽度要大于旁边两侧边的宽度，即可。使用同样的方法，可以画出四个方向上锐角三角形。
4、画直角三角形；.triangle{height:0;width:0;border-color:redtransparenttransparenttransparent;border-style:solid;border-width:200px100px0px0px;}原理：再画锐角三角形的基础上，让一侧边框宽度设置为0，对角边框设置为0；
5、画钝角三角形：画钝角三角形就要用到transform：skew();让直角三角形的两个锐角倾斜可以得到。通过旋转相应的角度可以得到我们想要的效果。
