css绘制三角形

使用css绘制三角形

css绘制三角形的方法：首先需要创建一个div元素，设置div的宽高（width/height)为0，只用边框的宽来填充，边框的样式为实线 “solid”;
顶部边框设置颜色，剩下三个边框的颜色设置为"transparent"值。

第一步

先写一个div,然后给这个div加一层border，把上下左右的border设置为不相同的颜色。代码和效果如下：

 .trangle1 {
        height: 100px;
        width: 100px;
       border:100px solid #000;
        border-top-color: red;
        border-bottom-color: green;
        border-left-color:purple ;
        border-right-color: tan;
  }

第二步

把这个div的height变成0，可以看到由于div的高变成了0，上下两边的border贴在了一起，左右变成了三角形。

  .trangle1 {
        height: 0px;
        width: 100px;
       border:100px solid #000;
        border-top-color: red;
        border-bottom-color: green;
        border-left-color:purple ;
        border-right-color: tan;
  }

第三步

再将这个div的width也变成0，可以看到由于div的宽也变成了0，左右两边的border也贴在了一起，那么到现在四个三角形都已经形成了。

 .trangle1 {
        height: 0px;
        width: 0px;
       border:100px solid #000;
        border-top-color: red;
        border-bottom-color: green;
        border-left-color:purple ;
        border-right-color: tan;
  }

第四步

根据你想要的角，把其余的三个border设置为透明。比如我想要最下边的三角形，就把上、左、右设置为透明。代码和效果图如下:

.trangle1 {
        height: 0px;
        width: 0px;
        border:100px solid #000;
        border-top-color: transparent;
        border-bottom-color: red;
        border-left-color:transparent ;
        border-right-color: transparent;
  }

优化代码

我们不需要把四个borde都设置一遍，只需要设置你想要画的三角形所需要的三条边border就可以，比如上边的三角形为例子，只需要设置下左右即可。

 /* 要哪个角就把其余三个border设为透明即可。例如，我想要最上面的三角形，那就把下、左、右设为透明，代码和效果如下： */
      .trangle2 {
        width: 0px;
        height: 0px;
        border-bottom: red 100px solid;
        border-left: transparent 100px solid;
        border-right: transparent 100px solid;
      }

css三角形运用实例

 <!-- top -->
  <div class="top">
    <!--top1 is safe area  -->
    <div class="top1">
        <ul>
            <li class="first"><a href="">个人客户</a>
                <!-- 下面这个div绘制三角 -->
            <div></div>

            
            </li>
            
            
            <li><a href="">企业客户</a></li>
            
        </ul>

/* top */

.top {
    height: 35px;
    background: #f2f2f2;
}
/* top1 is safe area */
.top1 {
    height: 35px;
    width: 1000px;
    margin: 0 auto;
    background: ;
}
.top1 ul {
  float: left;
  
}
.top1 ul li {
    float: left;
    
}
.top ul li a {
    
    font-size: 12px;
    line-height: 35px;
    display: block;
    width: 90px;
    text-align: center;
}
.top1 ul .first a{
    color: #fff;
     background: red; 
    
}

  .top1 ul .first div  {
    width: 0;
    border: 7px solid transparent;
    border-top-color: #af0812;
     margin-left: 40px;
      
 } 




.top1 p {
    float: left;
   
    
   margin-left: 100px;
   line-height: 35px;
   font-size: 12px;
    
   color: #af0812;
}