css三角形画法教程

CSS中画三角形是一个非常常见的需求，下面介绍两种常用的方法。

.p1 {
		width: 0;
		height: 0;
		border-top: 50px solid transparent;
		border-right: 100px solid red;
		border-bottom: 50px solid transparent;
	} 

以上代码表示画出一个高为50px，底边长为100px的红色三角形，通过设置border-top和border-bottom的宽度为0，再设置border-right和border-left的宽度来实现。

.p2 {
		width: 0;
		height: 0;
		border-color: transparent transparent red transparent;
		border-style: dashed dashed solid dashed;
		border-width: 0 25px 50px 25px;
	} 

以上代码同样表示画出一个红色三角形，通过设置border-color为透明，再设置border-width使三角形底边长为50px，通过border-style设置三角形的样式。

这两种方法各有优劣，前者看起来更直观，代码更简单，后者可以通过border-style设置其他形状的三角形。