纯css3实现三角形(上下左右)四角

627

纯css3实现三角形(上下左右)

第一步:创建一个div

<div class="triangle"></div>

第二步:为class类名triangle添加样式


三角向上:

1.png

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


三角向下:

2.png

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


三角向左:

3.png

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


三角向右:

4.png

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