border-css三角形原理

敲代码的大发
2,118 阅读3分钟

序

你能用 css 给我画一个三角形吗？（本文主题）

统一设置 4 个边为不同的颜色：黄红蓝绿(上右下左)。
提前说好，方便下面的调试查看。

image.png

  .div {
    width: 0;
    height: 0;
    /* 上下边框宽度是 40px */
    border-top: 40px solid yellow;
    border-bottom: 40px solid blue;
    /* 左右边框宽度是 60px */
    border-left: 60px solid green;
    border-right: 60px solid red;
  }

ps：你还会在下文中看到我最喜欢的粉色背景，它表示一个矩形的容器，大小是 80 * 120 px。（80 = 边框的上下边框宽度的和，120 = 左右边框的宽度的和）

css三角形原理：
1、通过只设置一个边框为有色，其余边框为透明色。
2、三角形大小受非同向的两边框宽度影响。
比如：下边框三角形，高度 = 下边框的宽度，宽度 = 左右边框宽度的和。 image.png

无论自己测试多少次，不去总结其中的规律本质，永远记不住。--2021/08/29

三角形边框原理

三角形大小

某边的三角形大小受非同向的两边框宽度影响。

image.png

比如上边框，高度是上边框的宽度，宽度是左右边框宽度的和。

上边框三角形的宽度 = 左边框的宽度 + 右边框的宽度
上边框三角形的高度 = 上边框的宽度

三角形等边

左右边框的宽度相等时，就是等边的三角形，如下：

image.png

左右边框宽度不相等时，就不是等边的三角形，如下：

image.png

左右边框某个宽度 0 时，就是直角三角形，如下：

image.png

三角形边框宽度调试

目的：通过设置边框宽度为0，查看三角形边框的大小的变化。

上边框的宽度为0

上边框的宽度为0时，左右边框顶部会被压缩裁剪。

image.png

左边框三角形高度 = 上下边框宽度和 = 下边框的宽度
右边框三角形高度 = 上下边框宽度和 = 下边框的宽度

上、下边框的宽度为0

上下边框的宽度为0时，左右边框会被压没了。

image.png

左边框三角形高度 = 上下边框宽度和 = 0
右边框三角形高度 = 上下边框宽度和 = 0

上、右边框的宽度为0

上、右边框的宽度为0时，变成了一个小矩形。

image.png

下边框三角形的宽度 = 左右边框宽度和 = 左边框的宽度
左边框三角形的高度 = 上下边框宽度和 = 下边框的宽度

三角形

三角形生成原理

只设置下边框的颜色为蓝色，其余边框的颜色设置为透明色，你就可以得到一个蓝色三角形。

image.png

蓝色三角形的宽度 = 左右边框的和
蓝色三角形的高度 = 下边框的宽度

三角形生成器

原文：手撸一个在线css三角形生成器/徐小夕 、 预览地址 -2021/08/29

// 三角形生成函数原理
const getBorderWidthAndColor = (direction:string, w:number, h:number, color:string) => {
  const borderWidthAndColor:any = {
    // 三角形角朝向
    '上': {
      borderWidth: `0 ${w/2}px ${h}px ${w/2}px`,
      borderColor:`transparent transparent ${color} transparent`
    },
    '下': {
      borderWidth: `${h}px ${w/2}px 0 ${w/2}px`,
      borderColor:`${color} transparent transparent transparent`
    },
    '左': {
      borderWidth: `${h/2}px ${w}px ${h/2}px 0`,
      borderColor:`transparent ${color} transparent transparent`
    },
    '右': {
      borderWidth: `${h/2}px 0 ${h/2}px ${w}px`,
      borderColor:`transparent transparent transparent ${color}`
    }
  }
  return borderWidthAndColor[direction]
}

// 旋转原理
transform: rotate(0deg);

多边形

平行四边形

平行四边形的实现需要使用两个三角形来实现

image.png

.divs-wrap {
  position: relative;
  width: 120px;
  height: 80px;
  background: #ff000020;
}
.div-black,
.div-blue {
  width: 0px;
  height: 0px;
  border-bottom: 40px solid blue;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 40px solid transparent;
  position: absolute;
}
.div-black {
  border-bottom-color: black;
  transform: rotate(180deg);
  top: 40px;
  left: 60px;
}

其他多边形

其余的多边形，可以用上面的原理绘制，但是没有必要。

因为，计算边框长度位置会让人抓狂吧～

svg 绘制可能会更香。
虽然，现在我 svg 也不怎么会。--2021/08/29

avatar
文章
阅读
粉丝