您的位置：首页 > Web前端 > CSS

纯CSS绘制三角形（多个角度）

2015-09-20 15:24 501 查看

运用CSS3绘制三角形的方法

HTML代码：

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

这里的div也可以写span p 等元素替代

1、上三角

.box{
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #2894d2;
}

2、下三角

.box{ 
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-top: 100px solid #2894d2;
}

3、左三角

.box{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-right: 100px solid #2894d2;
  border-bottom: 50px solid transparent;
}

4、右三角

.box{
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-left: 100px solid #2894d2;
  border-bottom: 50px solid transparent;
}

5、左上三角

.box{
  width: 0;
  height: 0;
  border-top: 100px solid #2894d2;   
  border-right: 100px solid transparent;
}

6、右上三角

.box{
  width: 0;
  height: 0;
  border-top: 100px solid #2894d2;  
  border-left: 100px solid transparent; 
}

7、左下三角

.box{
  width: 0;
  height: 0;
  border-bottom: 100px solid #2894d2;
  border-right: 100px solid transparent;
}

8、右下三角

.box{
  width: 0;
  height: 0;
  border-bottom: 100px solid #2894d2;
  border-left: 100px solid transparent;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航