一直觉得纯代码写形状会很难。现在看了看前端朋友的分享，感既简单，又有趣。值得学习！

html代码：

情景一：

.content{

width:10px;

height:10px;

border:10px solid #000;

border-bottom:10px solid #36e;

}

输出：

情景二：

.content{

width:5px;

height:5px;

border:10px solid #000;

border-bottom:10px solid #36e;

}

输出：

情景三：

.content{

width:0;

height:0;

border:10px solid transparent;/设为透明/

border-bottom:10px solid #36e;

}
输出：

情景四：

.content{

width:0;

height:0;

border:10px solid transparent;

border-left:10px solid #36e;

}

输出：

情景五：用伪类画三角形

content{

position: relative;//严谨

}

content:after{

border: 10px solid transparent;

border-left:10px solid #36e;

width: 0;//严谨

height: 0;//严谨

position: absolute;

content: ‘ ‘;/空/

}

输出：

情景六：
输出：

情景七：
输出：

情景八：
输出：

晕乎乎~明日继续！