colored box assets

by Cosette Girardot

HTML

<div class="longbox">
    <div class="greentriangle"></div>
</div>
<div class="smallbox1">
    <div class="primetriangle"></div>
</div>
<div class="pinkbox">
    <div class="primetriangle"></div>
</div>
<div class="longbox">
    <div class="purpletriangle"></div>
</div>
<div class="greybox">
    <div class="primetriangle"></div>
</div>
<div class="olivebox">
    <div class="primetriangle"></div>
</div>
<div class="bluebox">
    <div class="primetriangle"></div>
</div>
<div class="longbox">
    <div class="redtriangle"></div>
</div>
<div class="longbox" style="width:40%;margin-left:5%;">
    <div class="dkgrtriangle"></div>
</div>

CSS

.primetriangle {
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color: #CCC;
}
.dkgrtriangle {
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color:#006633;
}
.redtriangle {
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color: #993333;
}
.purpletriangle {
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color:#7E357E;
}
.greentriangle {
	border-top:25px solid green;
	height: 0;
	position:absolute;
	width: 0;
	z-index:3;	
	border-right: 25px solid transparent;
	height: 0;
	position:absolute;
	width: 0;
	z-index:5;
	border-top-color:#339933;
}
.longbox {
    z-index:3;
    height: 80px;
    width: 90%;
    margin-left: auto;
    margin-right:auto;
    position: relative;
    background-color: #363636;
    margin-top:15px;
}
.greybox {
    z-index: 3;
    height:125px;
    width:28%;
    margin-top: 15px;
    position:relative;
    margin-left:5%;
    background-color:#707070;   
}
.smallbox1 {
    z-index: 3;
    height:125px;
    width:33%;
    margin-left:5%;
    margin-top: 15px;
    position:relative;
    background-color: #336633;
}
.pinkbox {
    z-index: 3;
    height:125px;
    width:33%;
    margin-top: -125px;
    position:absolute;
    display: inline;
    margin-left:40%;
    background-color:#996666;
}
.olivebox {
    z-index: 3;
    height:125px;
    width:28%;
    margin-top: -125px;
    position:absolute;
    display: inline;
    margin-left: 35%;
   ...