css 生成三角形

1,生成有填充颜色的三角形

some-class {

  width: 0;

  height: 0;

  border-left: 20px solid transparent;

  border-right: 20px solid transparent;

  border-bottom: 40px solid red;

}

或者

some-class {

  width: 0;

  height: 0;

  border-width: 20px;

  border-style: solid;

  border-color: transparent transparent red transparent;

}

2,生成没有颜色填充的三角形

some-class {

  display: block;

  width: 5px;

  height: 5px;

  border-color: transparent transparent #fff #fff;

  border-style: solid;

  border-width: 2px;

  transform: rotate(-45deg);

}

posted @ 2016-06-19 10:24  清风叶  阅读(497)  评论(0编辑  收藏  举报