css实现三角形的两种方法

1

.triangle1{
    position: absolute;
    left:500px;
    top:300px;
    width:0;
    height:0;
    border-top:5px solid red;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
}

    <div class="triangle1"></div>

2

.triangle2{
    position: absolute;
    left:510px;
    top:310px;
    width:0;
    height:0;
    border:5px solid #fff;
    border-top-color:black
}

 <div class="triangle2"></div>

 

方法2书写简单 但只能画等边三角形  方法1可以画各种需求的三角形 不等边 直角 等腰等
 

 

3 利用边框原理

div{
  width:0;
  height:0;
  border: 10px solid #fff;
  border-top-color:#000;

}

<div></div