码迷,mamicode.com
首页 > Web开发 > 详细

css 生成三角形

时间:2016-06-19 11:22:41      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:

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);

}

css 生成三角形

标签:

原文地址:http://www.cnblogs.com/yezongyang/p/5597532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!