likes
comments
collection
share

用 CSS 画三角形

作者站长头像
站长
· 阅读数 299

网页中一些常见的三角形,可以使用 CSS 直接画出来

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

用 CSS 画三角形

有四个三角形!如果想要其中的一个三角形,把其他 border 设为透明就好,比如我想要向右的箭头,只需要将最后两行改为:

  /* 把所有边设为透明,设置需要的那条边的颜色即可 */
  border: 50px solid transparent;
  border-left-color: green;

用 CSS 画三角形

那能不能画个其他样式的三角形呢?比如这样:

用 CSS 画三角形

还是修改最后两行代码:

  border: solid transparent;
  border-left-color: green;
  /* 修改 border-width 可以改变三角形的形状 */
  border-width: 50px 25px;

还可以画直角三角形,只需要修改 border-width 为:

  border-width: 50px 25px 0;

用 CSS 画三角形