Less如何实现CSS三角形的快速绘制_封装border形状参数化Mixin-css教程-PHP中文网

手写border三角形易出错是因为人易漏边、写错transparent、缺单位或混淆方向逻辑；推荐用.triangle(@direction,@size,@color)mixin封装，统一设四边透明再单边着色，语义清晰且防错。

less如何实现css三角形的快速绘制_封装border形状参数化mixin

为什么手写 `border` 三角形总出错

不是浏览器不支持，是人容易漏边、写错透明色、单位缺失。比如只写 border-bottom: 6px solid #333，缺了其他三边——浏览器会按默认 border-style: none 渲染，结果啥也不显示；又或者把 transparent 写成 none 或 0，语法直接失效。

更隐蔽的问题是方向逻辑：上三角靠 border-bottom 显色，下三角却要靠 border-top，左右同理。每次换方向都得重推一遍哪边留色、哪三边透明、宽度怎么配，极易翻车。

transparent 是唯一安全的“空边”值，none/unset/initial 都不行
@size 必须带单位（如 6px），传 6 会导致 border 简写解析失败
零宽高元素默认是 inline，受 line-height 和 vertical-align 影响，常出现底部留白或偏移

`.triangle()` Mixin 的参数设计与调用方式

一个真正能落地的 .triangle() 应该只暴露三个可控维度：方向、大小、颜色。方向限定为 up/down/left/right 字符串，避免拼错；大小必须是带单位的长度值；颜色默认用 currentColor，方便继承文字色。

推荐用 border 简写统一设四边宽度和透明色，再单独覆盖单边颜色——比手动写四条 border-* 更稳：

.triangle(@direction, @size, @color: currentColor) {
  width: 0;
  height: 0;
  border: @size solid transparent;
  & when (@direction = up) { border-bottom-color: @color; }
  & when (@direction = down) { border-top-color: @color; }
  & when (@direction = left) { border-right-color: @color; }
  & when (@direction = right) { border-left-color: @color; }
}

调用时直给语义化参数：.triangle(up, 6px, #007bff)，不用记哪边该写 solid。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

IE11 兼容性下 `& when` 的 fallback 方案

IE11 不支持 Less 的 & when 条件嵌套语法，编译会报错。如果项目还要兼容它，就得拆成四个独立 Mixin，用命名区分方向：

.triangle-up(@size, @color: currentColor) {
  width: 0; height: 0;
  border: @size solid transparent;
  border-bottom-color: @color;
}
.triangle-down(@size, @color: currentColor) {
  width: 0; height: 0;
  border: @size solid transparent;
  border-top-color: @color;
}
/* left / right 同理 */

虽然多写几行，但确保所有环境都能跑通。现代项目可忽略此条，但上线前务必确认构建工具使用的 Less 版本是否 ≥ 3.5。