实现三角形的CSS,只需设置好相对应的边框颜色为transparent即可!

  • nw:右上(50px 50px 0px 0px)、左下(0px 0px 50px 50px)
  • ne:左上(50px 0px 0px 50px)、右下(0px 50px 50px 0px)
  • sw:左上(50px 0px 0px 50px)、右下(0px 50px 50px 0px)
  • se:右上(50px 50px 0px 0px)、左下(0px 0px 50px 50px)

二个相邻边框:

width: 0px;
height: 0px;
border-style: solid;
border-width:50px 50px 0 0;
border-color: red blue transparent transparent;

三个相邻边框:

width: 0px;
height: 0px;
border-style: solid;
border-width:50px 50px 50px 0;
border-color: red blue green transparent;

四个相邻边框

要保留哪个三角形,只需要设置颜色,不保留的就设为透明。

width: 0px;
height: 0px;
border-style: solid;
border-width:50px 50px 50px 50;
border-color: red blue green black;

这种大的三角形如保留上边的三角形,也可以用下面的写法:

width: 0px;
height: 0px;
border:50px solid transparent;
border-top-color: red;