小三角形

<div class="trangle"></div>

<style>
.trangle{
    width: 0;
    height:0;
    border: 10px solid;
    border-color: transparent transparent red red;

}
</style>

 

 

第二种

 

.trangle{
    width: 0;
    height:0;
    border-style: solid;
    border-color: #0f0 #fff #fff #fff;
    border-width: 100px 60px 0 60px;
}

2、 cavas

<div id="canvas"></div>
<script>
var canvas = document.getElementById('canvas');
 if (canvas.getContext){
   var ctx = canvas.getContext('2d');
    ctx.beginPath();
    ctx.moveTo(75,50);
    ctx.lineTo(100,75);
    ctx.lineTo(100,25);
    ctx.fill();
 }
</script>

3、svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">

<polygon points="220,100 300,210 170,250"
style="fill:#cccccc;
stroke:#000000;stroke-width:1"/>
</svg>