1.无边框三角形

条件：width,height设置为0，border-width设置一定的宽度,border-color保留一边有颜色其他三边设置透明

.triangle{    width:0px;    height:0px;    border-width:40px;    border-style: solid;	border-color: #FF7F24 transparent transparent transparent;}

效果：

2.有边框三角形

由于我们写三角形的时候用到的就是border，所以给三角形添加边框就不能再用border属性了，我们就使用元素覆盖，设置大小不一样的边框，大的在下面，这就用到position:absolute,

//html
    
	
     
    
//css.triangle{	position:absolute;	left:0px;	top:0px;	width:0px;	height:0px;	border-width:40px;    border-style: solid;	border-color: #FF7F24 #EEC900 #E066FF #90EE90;;}.triangle-border{    position:relative;	width:0px;    height:0px;    border-width:42px;    border-style: solid;    border-color: #FF7F24 #EEC900 #E066FF #90EE90;;}

效果如下：

绝对定位并没有覆盖到父元素上，因为我们的三角形是边，而不是真正的内容区域，绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。由于父元素div内容为空，content的内容在中心，所以子元素是根据中心点来定位的，我们知道这个原理，微调下子元素的定位即可,然后把父元素的边框颜色设置为边框色

.triangle{    position:absolute;	left:-40px;//修改这行	top:-40px;//修改这行	width:0px;	height:0px;	border-width:40px;	border-style: solid;	border-color: #FF7F24 #EEC900 #E066FF #90EE90;}.triangle-border{	position:relative;    width:0px;    height:0px;    border-width:42px;    border-style: solid;    border-color: #333;//修改颜色}

效果如下：

然后隐藏父元素，子元素其他三个边就可以