1. css画三角形

<div class="square"></div>
.square{
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color:#FFCCCC #0099CC #996699 #339933;
}

<div class="triangle"></div>
.triangle{
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color: transparent transparent #FFCCCC transparent;
}

<div class="triangle"></div>
.triangle{
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color: #ff0000 transparent transparent transparent;
}

<div class="triangle"></div>
.triangle{
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color:  transparent #ff0000 transparent transparent;
}

<div class="triangle"></div>
.triangle{
 width: 0; 
 height: 0;
 border-width: 100px;
 border-style: solid;
 border-color:  transparent transparent transparent  #ff0000;
}

<div></div>
div{
    position: relative;
    width:220px;
    height:60px;
    margin:50px auto;
    padding:5px;
    border:1px solid #d9d9d9;
    border-radius:4px;
    box-sizing:border-box;
}
div:before{
    position:absolute;
    left:20px;
    top:0;
    margin-top:-20px;
    content:"";
    border:10px solid transparent;
    border-bottom-color:#d9d9d9;
   

}
div:after{
    position: absolute;
    top:0;
    left:20px;
    margin-top:-19px;
    content:"";
    border:10px solid transparent;
    border-bottom-color:#fff;
}