利用css3绘制三角形

作者:日期:2017-01-25 16:23:18 点击:960

方法/步骤

新建一个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;
   }

上一篇: HTML5 Web存储(localStorage与sessionStorage)

下一篇: 网页各种布局的解决方案