爱站程序员基地通过设置边框来实现三角形。如下图：
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>小三角</title><style>.demo:after {content: \'\';display: inline-block;width: 0;height: 0;border-top: 50px solid red;border-right: 50px solid green;border-bottom: 50px solid blue;border-left: 50px solid yellow;position: relative;top: 0px;left: 30px;}.top:after {content: \'\';width: 0px;height: 0px;display: inline-block;border-top: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid blue;border-left: 50px solid transparent;position: relative;top: 10px;left: 30px;}.right:after {content: \'\';width: 0px;height: 0px;display: inline-block;border-top: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid yellow;position: relative;top: 40px;left: 30px;}.bottom:after {content: \'\';width: 0px;height: 0px;display: inline-block;border-top: 50px solid red;border-right: 50px solid transparent;border-bottom: 50px solid transparent;border-left: 50px solid transparent;position: relative;top: 80px;left: 30px;}.left:after {content: \'\';width: 0px;height: 0px;display: inline-block;border-top: 50px solid transparent;border-right: 50px solid green;border-bottom: 50px solid transparent;border-left: 50px solid transparent;position: relative;top: 50px;left: 0px;}</style></head><body><div class=\"demo\">这是一整个边框</div><div class=\"top\">这是一个向上的边框三角形</div><div class=\"right\">这是一个向右的边框三角形</div><div class=\"bottom\">这是一个向下的边框三角形</div><div class=\"left\">这是一个向左的边框三角形</div><div><h2>部分css说明：</h2><h3>content: \'\';<span>内容为空</span></h3><h3>border-top: 50px solid transparent;<span>设置上边框为透明，其他的同理</span></h3></div></body></html>
