[css]仅通过border属性绘制三角形

css

/* border是由三角形组成的 */
			.div1{
				width: 50px;
				height: 50px;
				border: 2px solid orange;
			}
			.div2{
				width: 50px;
				height: 50px;
				border: 40px solid;
				border-color: red orange yellow green;
			}
			.div3{
				width: 0px;
				height: 0px;
				border: 40px solid;
				border-color: red orange yellow green;
			}
			/* 保留最下面的三角形
				透明border仍占据空间，要想使得绘制出的三角形尺寸最小化，需将border的宽度设置为0
			 */
			.div4{
				width: 0px;
				height: 0px;
				border: 40px solid;
				border-color: transparent transparent red; 
			}
			/* 将border的宽度设置为0 */
			.div4{
				width: 0px;
				height: 0px;
				border: 40px solid;
				border-color: transparent transparent red; 
				border-width: 0px 40px 40px;
			}
			/* 5的颜色、宽度注释 */
			.div6{
				width: 0;
				height: 0;
				border-width: 30px 40px 40px;
				border-color: blue yellow green;
				border-style: solid;
			}
			/* 叠放的方法为三角形加边框 设置带蓝色边框的黄色三角形 */
			.blue{
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 0px 40px 40px;
				border-color: transparent transparent blue;
				position: relative;
			}
			/* 使用伪元素为蓝色三角形加边框,需要用到绝对定位的方法 */
			.blue::after{
				content: "";
				/* width: 0; */
				/* height: 0; */
				border-style: solid;
				border-width: 0px 38px 38px;
				border-color: transparent transparent yellow;
				position: absolute;		/* 此设置使得元素尺寸在不显示设置宽度和高度的情况下，收缩到元素内容(content:"")的尺寸,因此可以不另外设置宽高为0 */
				top: 1px;
				left: -38px;
			}
			/* 箭头 */
			.arrow{
				position: relative;
				width: 0;
				height: 0;
				border-style: solid;
				border-color: transparent transparent lightseagreen;
				border-width: 0px 40px 40px;
			}
			.arrow::after{
				position: absolute;
				content: "";
				border-style: solid;
				border-color: transparent transparent #fff;
				border-width: 0px 38px 38px;
				top: 2px;
				left: -38px;
			}
			/* 右直角三角形 */
			.div7{
				width: 0;
				height: 0;
				border-style: solid;
				border-color: transparent blue blue transparent ;
				border-width: 40px;
			}
			.div9{
				width: 0;
				height: 0;
				border-style: solid;
				border-color: transparent transparent blue transparent;
				border-width: 0px 0px 40px 40px;
			}
			/* 左直角三角形 */
			.div8{
				width: 0;
				height: 0;
				border-style: solid;
				border-color: transparent transparent blue blue;
				border-width: 40px;
			}
			.div10{
				width: 0;
				height: 0;
				border-style: solid;
				border-color: transparent transparent blue transparent;
				border-width: 0px 40px 40px 0px;
			}

html

		<span>div1</span>
		<div class="div1"></div>
		<span>div2</span>
		<div class="div2"></div>
		<span>div3</span>
		<div class="div3"></div>
		<span>div4</span>
		<div class="div4"></div>
		<span>div5</span>
		<div class="div5"></div>
		<br>
		<span>div6</span>
		<div class="div6"></div>
		<span>blue</span>
		<div class="blue"></div>
		<span>arrow</span>
		<div class="arrow"></div>
		<span>右直角三角形</span>
		<div class="div7"></div>
		<span>div9</span>
		<div class="div9"></div>
		
		<span>左直角三角形</span>
		<div class="div8"></div>
		<span>div10</span>
		<div class="div10"></div>