搜索了很多三角形画法,自己总结记录一下:
使用div画三角形,使用div的四个边框进行绘制,
1、设置宽高都为0: width:0;height:0;
2、以border的四个边,进行绘制,固定某一边,比如上边框(就是不设置border-top),然后在设置其余三条边,固定了上边框,所以上边是不会移动的(div宽高都为0,所以是一个点),然后设置其余三条边框的宽度,也就是该边到固定的点(上顶点)的距离。
css如下:
border-left: 50px solid transparent;
/*50px为左顶点到上顶点的水平距离*/
border-right: 0px solid transparent;
/*100px为右顶点到上顶点的水平距离*/
border-bottom: 100px solid red;
/*200px为底线到上顶点的水平距离*/
示意图如下:
固定其他边,和此类似,如有不对,敬请指出。
还可以使用旋转角度进行图形的转换,达到想要的效果。
transform: rotate(90deg);支持正负数角度,对应顺、逆时针。