前端 CSS3写三角形（包括空心三角形）

.triangle{
	  width: 0;
	  height: 0;
	  border: 50px solid transparent;
	  border-top-color: lightpink;
	  border-right-color: lightblue;
	  border-bottom-color: lightskyblue;
	  border-left-color: lightgreen;
}
<div class="triangle"></div>

.triangle{
	  width: 0;
	  height: 0;
	  border: 50px solid transparent;
	  border-top-color: lightpink;
}
<div class="triangle"></div>

.triangle{
	  width: 0;
	  height: 0;
	  border: 50px solid transparent;
	   border-right-color: lightblue;
}
<div class="triangle"></div>

.triangle{
	  width: 0;
	  height: 0;
	  border: 50px solid transparent;
	  border-bottom-color: lightseagreen;
}
<div class="triangle"></div>

.triangle{
	  width: 0;
	  height: 0;
	  border: 50px solid transparent;
	  border-left-color: lightgreen;
}
<div class="triangle"></div>

但是…往往我们要的不是这样…

可能想做一个对话框…需要透明…

 <div class="triangle">三角形啊三角形</div>
 .triangle2 {
	  margin-top: 50px;
	  margin-left: 30px;
	  height: 40px;
	  width: 125px;
	  border: 1px solid #ccc;
	  padding: 10px;
	  vertical-align: middle;
	  position: relative;
	  box-sizing: border-box;
}
.triangle2::before {
	  position: absolute;
	  content: "";
	  display: inline-block;
	  height: 0;
	  width: 0;
	  border-right: 10px solid #ccc;
	  border-top: 10px solid transparent;
	  border-bottom: 10px solid transparent;
	  top: 10px;
	  left: -10px;
}
.triangle2::after {
	  position: absolute;
	  content: "";
	  display: inline-block;
	  height: 0;
	  width: 0;
	  border-right: 9px solid white;
	  border-top: 9px solid transparent;
	  border-bottom: 9px solid transparent;
	  top: 11px;
	  left: -9px;
}