原理:画一个div，给div的宽高为0，给4个border属性，把其中三个隐藏就可以得到一个三角形。
很简单的一个原理，项目中可能很少用到，业余可以玩玩，其实前端蛮好玩的。可以实现各种各样的功能。
css:
1 .test1 {2 ????????width: 0;3 ????????height: 0;4 ????????border-right: 50px solid transparent;5 ????????border-bottom: 50px solid blue;6 ????????border-left: 50px solid transparent;7 ????}HTML:
1 <div class="test1"></div>
全部代码：
1 <!DOCTYPE html> 2 <html> 3 ?4 ????<head> 5 ????????<meta charset="UTF-8"> 6 ????????<title></title> 7 ????</head> 8 ????<!--/*1.css样式*/--> 9 ????<style type="text/css">10 ????????.test1 {11 ????????????width: 0;12 ????????????height: 0;13 ????????????border-right: 50px solid transparent;14 ????????????border-bottom: 50px solid blue;15 ????????????border-left: 50px solid transparent;16 ????????}17 ????????18 ????????.test2 {19 ????????????width: 0;20 ????????????height: 0;21 ????????????border-top: 50px solid transparent;22 ????????????border-bottom: 50px solid transparent;23 ????????????border-left: 50px solid orange;24 ????????}25 ????????26 ????????.test3 {27 ????????????width: 0;28 ????????????height: 0;29 ????????????border-top: 50px solid black;30 ????????????border-right: 50px solid transparent;31 ????????????border-left: 50px solid transparent;32 ????????}33 ????????34 ????????.test4 {35 ????????????width: 0;36 ????????????height: 0;37 ????????????border-top: 50px solid transparent;38 ????????????border-right: 50px solid red;39 ????????????border-bottom: 50px solid transparent;40 ????????}41 ????</style>42 43 ????<body>44 ????????<!--2.html样式-->45 ????????<div class="test1"></div>46 ????????<div class="test2"></div>47 ????????<div class="test3"></div>48 ????????<div class="test4"></div>49 ????</body>50 51 </html>2018年1月9日，今天小马哥变成我们的顾问了。不是再是我们的老大了。嗯，还可以吃一顿饭。
是不是要变的成熟点了，骚年。
css_画一个三角形
原文地址：https://www.cnblogs.com/wush-1215/p/8253539.html