用CSS画三角形（等腰、直角、正三角形）和提示框

1.用CSS实现一个三角形：

需要把元素的宽度、高度设置为0，然后为其设置边框。需要哪个边框设置哪个边框的颜色，相邻边框的颜色设置color为transparent，对应边框可以设置color为transparent也可以不设置。代码如下：

效果如下：

1.1用CSS实现一个提示框：

先设置好边缘框，再画一个三角形定位在边缘框上，再画一个白色三角形，调整其定位使其覆盖掉前面三角形的某一边。代码如下：

效果如下：

2.用CSS实现一个等边三角形：

上面实现的三角形是一个等腰三角形，那如何画出一个等边三角形？根据各个边之间的长度关系，我们易知：需要展示的边框的宽度：相邻的透明的边框的宽度=

代码如下：

.triangle{
	width: 0px;
	height: 0px;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;;
	border-top: 17.32px solid transparent;
	border-bottom: 17.32px solid red; 
}

效果如图所示：

3.用CSS实现一个等腰直角三角形：

将直角三角形的两个直角边对应的框框方向的边框的颜色设置为不透明的

代码如下：

.triangle{
	width: 0px;
	height: 0px;
	border-left: 20px solid red;
	border-right: 20px solid transparent;;
	border-top: 20px solid transparent;
	border-bottom: 20px solid red; 
}

效果如图所示：

如果我们设置不同的颜色则很容易看出原理：