css - 三角形的制作

  在我们写项目的时候会时不时的遇到需要一个三角形，这时会选择直接拿一张图片来代替，或者自己用css样式来画一个三角形，下面我来跟大家解释一下如何使用css样式来制作一个三角形：
1、三角形代码：
   HTML代码：

			<div class="body">
			  <div class="box">
			    <div class="triangle"></div>
			  </div>
			</div>

   css代码：

			body{
			 	 background:skyblue;
			}
			.box {
			  	 margin:100px;
			}
			.triangle {
				  width: 0px;
				  height: 0px;
				  border-left: 30px solid transparent;   // 设置左边框
				  border-right: 0px solid transparent; 	// 设置右边框
				  border-bottom: 0px solid red;	//  设置下边框
				  background-color: rgba(127,127,127,0);  // 背景颜色（直接设置为透明色）
				  border-bottom-width: 30px;  // 设置下边框的长度
			}

2、运行结果：