方法/步骤

新建一个html5网页，名称为index.html，在代码中写上四个div，分别是向上、向下、向左，向右四个三角形，代码如下：

  <div class="triangle-up">    <!--向上的三角-->   </div>
  <div class="triangle-down">    <!--向下的三角-->  </div>
  <div class="triangle-left">    <!--向左的三角-->   </div>
  <div class="triangle-right">   <!--向右的三角-->  </div>

然后新建一个css文件style.css，并在index.html中引入，引入代码：

向上的三角形：

• 第一种

  .triangle-up {   
      width:0;
      height:0;   
      border-left:30px solid transparent;   
      border-right:30px solid transparent;   
      border-bottom:30px solid #fff;
  }

• 第二种

  .triangle-up {    
      width:0;    
      height:0;   
      border:30px solid transparent;    
      border-bottom-color:#fff;
  }

向下的三角形:

  .triangle-down {   
      width:0;   
      height:0;   
      border-left:20px solid transparent;   
      border-right:20px solid transparent;   
      border-top:20px solid #0066cc;
  }

向左的三角形：

  .triangle-left {   
      width:0;   
      height:0;   
      border-top:30px solid transparent;   
      border-bottom:30px solid transparent;   
      border-right:30px solid yellow;
  }

向右三角形:

   .triangle-right {   
       width:0;   
       height:0;   
       border-top:50px solid transparent;   
       border-bottom: 50px solid transparent;   
       border-left: 50px solid green;
   }