【CSS】边界三角形

有三角形 Unicode 字符。您可以在 SVG 中绘制三角形。但还有另一种在 Web 上绘制三角形的方法,只需使用 border 属性和一些 CSS 技巧即可。

想象一个具有粗边框的元素:

.triangle {
  width: 200px;
  height: 200px;
  border: 10px solid black;
}

在这里插入图片描述
现在想象一下所有四个边框都有不同的颜色:

.triangle {
  ...

  border-left-color:    red;
  border-right-color:   yellowgreen;
  border-top-color:     orange;
  border-bottom-color:  rebeccapurple;
}

在这里插入图片描述
注意到边界是如何以一定角度相交的吗?

看看当我们将元素折叠为零宽度和高度时会发生什么:

.triangle {
  ...

  width: 0;
  height: 0;
}

在这里插入图片描述
如果其中三条边界是transparent,我们就会得到一个三角形!

.triangle {
  ...

  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  border-bottom-color: rebeccapurple;
}

在这里插入图片描述

上一篇:基于Springboot+微信小程序的任务打卡系统(含源码数据库)


下一篇:WebSocket—双向实时通信