关于前端:用-CSS-画三角形

网页中一些常见的三角形，能够应用 CSS 间接画进去

div {
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border: 50px solid;
  border-color: red blue yellow green;
}

有四个三角形！如果想要其中的一个三角形，把其余 border 设为通明就好，比方我想要向右的箭头，只须要将最初两行改为：

  /* 把所有边设为通明，设置须要的那条边的色彩即可 */
  border: 50px solid transparent;
  border-left-color: green;

那能不能画个其余款式的三角形呢？比方这样：

还是批改最初两行代码：

  border: solid transparent;
  border-left-color: green;
  /* 批改 border-width 能够扭转三角形的形态 */
  border-width: 50px 25px;

还能够画直角三角形，只须要批改 border-width 为：

  border-width: 50px 25px 0;