用 CSS 画三角形前端css

网页中一些常见的三角形，可以使用 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;

文章图片

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

文章图片

还是修改最后两行代码：

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

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

border-width: 50px 25px 0;

文章图片

用 CSS 画三角形