border标签制作常见的形状

经常在做网页导航栏的时候,有二级菜单的时候,有一个小三角形表示下拉的,其实很多基础的图形我们都是可以直接用代码写出来的,下面来简单介绍几个栗子叭~

1.三角形

.triangle1{
  	width: 0;
 	height: 0;
 	border: 50px solid #FBAAC3;
  	border-top-color: transparent;
  	border-left-color: transparent;
  	border-right-color: transparent;
  	border-top: none;
  }
.triangle2 {
    width: 0;
 	height: 0;
    border: 50px solid #FBAAC3;
    border-width: 30px 50px;
    border-top-color: transparent;
    border-right-color: transparent;
}
.triangle3{
    width: 0;
 	height: 0;
    border: 50px solid #FBAAC3;
    border-top-color: transparent;
    border-bottom-color: transparent;
    border-right-color: transparent;
 }

小松树小松树

2. 菱形

    .diamond {
      width: 0;
      height: 0;
      border: 40px solid #FBAAC3;
      transform: rotate(45deg);
    }

制作菱形还可以用两个盒子来制作，第一个盒子的下边框和第二个盒子的上边框

    .diamond2 {
      width: 0;
      height: 0;
      border: 40px solid #FBAAC3;
    }
    .diamond2.p1 {
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }
    .diamond2.p2 {
      border-bottom-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
    }

3.梯形

    .trapezoid {
      width: 100px;
      height: 0;
      border: 40px solid #FBAAC3;
      border-top-color: transparent;
      border-left-color: transparent;
      border-right-color: transparent;
      border-top: none;
    }

border可以玩出很多花样，可以自己打开开发者工具改变盒子的宽高，调出不一样的图形，自己去试试吧！