一、绘制固定宽高三角形
绘制三角形，主要通过border来实现，首先我们看一下四边border分配的效果。
<div class="triangle"></div>
.triangle{
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 100px solid green;
border-right: 100px solid blue;
border-bottom: 100px solid pink;
}
效果如下：
image.png
可以看到，但宽高为0，四边border的宽度相等的情况下会均分为4个三角形。
通过这个效果，我们可以通过控制四边border的透明、宽度来显示一个三角形。
例如：绘制一个直角三角形
顶部border为0，左右border设置宽度相等且透明的即可实现。
.triangle{
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid pink;
}
效果如下：
image.png
二、绘制宽高自适应三角形
通过clip-path和svg实现宽高自适应的三角形。
但这个方式兼容性不太好。
image.png
<div class="t">
dsfsdfs
<br/>
dsfsdfs
<br/>
dsfsdfs
<br/>
</div>
.t{
width: 100%;
position: relative;
text-align: center;
}
.t:after{
position: absolute;
content: '';
top: 0;
left: 0;
right: 0;
bottom:0;
background: yellow;
z-index: -1;
clip-path: polygon(50% 0, 0% 100%, 100% 100%);
}
image.png
效果如下：
三、绘制固定宽高比三角形
思路：绘制一个足够大的三角形，外层三角形宽高比与三角形一致，且为百分比，根据屏幕改变，显示里边的内容，超出范围隐藏
<div class="t"></div>
.t {
width: 40%;
padding-top: 8%;
padding-left: 40%;
overflow: hidden;
border: 1px solid red;
}
.t:after {
content: '';
display: block;
width: 0;
height: 0;
border-left: 1500px solid transparent;
border-right: 1500px solid transparent;
border-top: 300px solid #249ff1;
margin-top: -300px;
margin-left: -1500px;
}
效果如下：（会根据屏幕宽度变化）
image.png
