CSS三角做法

两种常见三角形做法

一、等腰直角
1、新建一个div

<div class=jiao1></div>

2、为盒子添加样式。

.jiao1{
	width:0;
    height:0;
	border:50px solid transparent;
	border-bottom-color: red;
}

二、非等腰直角
1、新建一个div

<div class=jiao2></div>

2、给div相关样式

   .jiao2 {
            width: 0;
            height: 0;
            border-bottom: 100px solid red;
            border-top: 0 solid green;
            border-left: 50px solid transparent;
            border-right: 0 solid pink;
        }

简写：
width: 0;
height: 0;
border-color: transparent transparent red transparent;
border-style: solid;
border-width: 0 0 100px 50px;