前端学习笔记 - CSS - 4.CSS三角形

1.定义一个四个不同颜色边框的盒子

.box{
		width: 100px;
		height: 100px;
		border: 10px solid;
		border-top-color: red;
		border-right-color: green;
		border-bottom-color: blue;
		border-left-color: pink;
	}

2.改变边框大小，越大越像三角形

.box{
		width: 100px;
		height: 100px;
		border: 100px solid; /* 边框加宽 */
		border-top-color: red;
		border-right-color: green;
		border-bottom-color: blue;
		border-left-color: pink;
	}

3.去掉content后，边框变为三角形

.box{
		width: 0px;  /* 去掉内容 */
		height: 0px;
		border: 100px solid; /* 边框加宽 */
		border-top-color: red;
		border-right-color: green;
		border-bottom-color: blue;
		border-left-color: pink;
	}

4.选择一个，将其他的颜色设置为透明，则得到三角形

.box{
		width: 0px;  /* 去掉内容 */
		height: 0px;
		border: 100px solid; /* 边框加宽 */
		border-top-color: red;
		border-right-color: transparent;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}