一、剖析原理
1.如下图所示，空白区域为 content 内容区，四周为 border 边框。
css代码：
width: 100px; height: 100px; border-top:50px solid red; border-right: 50px solid green; border-bottom: 50px solid blue; border-left: 50px solid yellow;
2.当 content 逐渐缩小至 0px 时，就会出现想要的三角形。
css代码：
css代码：
css
复制代码
width: 0px; height: 0px; border-top:50px solid red; border-right: 50px solid green; border-bottom: 50px solid blue; border-left: 50px solid yellow;
二、小试牛刀
1.首先，我们依次创建上、下、左、右四个 div 盒子。
<div class="up"></div> <div class="down"></div> <div class="left"></div> <div class="right"></div>
2.添加css样式。
- 上三角形
.up { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: transparent transparent red transparent; }
- 下三角形
.down { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: red transparent transparent transparent; }
- 左三角形
.down { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: transparent red transparent transparent; }
- 右三角形
.down { width: 0; height: 0; border-width: 50px; border-style: solid; border-color: transparent transparent transparent red; }
