by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12118
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

本文内容分为两啪，一个是六边形头像效果的实现，而是金字塔布局（又称蜂巢布局）的实现。

一、六边形头像

不啰嗦，直接看代码和最终实现的效果，同样的，用的是CSS corner-shape属性。

img {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: 150px;
  border: 1px solid #0001;
  object-fit: cover;
}

实时渲染效果如下：

如果你是手机访问，或者一些很久没升级的国产浏览器，应当看不到效果，可以看下面的截图：

六边形头像的CSS代码是固定的，大家使用的时候直接复制粘贴就好了。

二、蜂窝布局实现方法

六边形也正好是蜂巢格子的形状，因此，非常适合用来实现金字塔一样的蜂窝布局。

实际上，这种布局在日常开发中也是比较常见的，例如我最近开发的某个页面就有这样的布局：

一般的开发人员遇到这种状况，可能会手工硬搓每个元素的定位，例如，例如匹配第一项元素，让其绝对定位居中，第二行元素保持Flex布局。

.item:first-child {
  /* 第一行特殊居中处理 */
  position: absolute;
}

其实可以试试Flex倒序排版。

Flex实现蜂窝布局

假设HTML结构如下：

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

则可以试试如下所示的CSS：

.container {
  --size: 40px;
  --gap: 5px;
  --offset: calc((2 * var(--size) + var(--gap)) / (-4 * cos(30deg)));

  width: 240px;
  display: flex;
  flex-wrap: wrap-reverse;
  direction: rtl;
  justify-content: center;
  gap: var(--gap);
  padding-bottom: calc(-1 * var(--offset));
}

.container > span {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: calc(var(--size) * 2);
  margin-bottom: var(--offset);
  /* 排序倒序 */
  order: calc(-1 * sibling-index());
  /* 提示文字居中 */
  display: grid;
  place-items: center;
  background-color: deepskyblue;
  color: #fff;
}

此时的渲染效果如下截图所示：

不过Flex倒序只适合三个数量，如果超过，那么这个布局方法就无效了。

下面问题来了，有没有什么办法，无论列表数量多少，自动金字塔布局呢？

Grid实现蜂巢布局

有，Grid布局是可以实现这样的效果的。

我们先从最简单三个列表项开始实现，假设HTML代码如下：

<div class="container">
  <s></s>
  <s></s>
  <s></s>
</div>

如下CSS代码就可以有蜂窝布局效果了：

.container {
  --size: 40px;
  --gap: 5px;

  width: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--size));
  justify-content: center;
  gap: var(--gap);
  padding-bottom: calc((2 * var(--size) + var(--gap)) / (4 * cos(30deg)));
  outline: 1px dotted;
}

.container > s {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  /* 垂直方向间隙和gap保持一致 */
  margin-bottom: calc((2 * var(--size) + var(--gap)) / (-4 * cos(30deg)));
  background-color: deepskyblue;
}

.container > :nth-child(1) {
  grid-column-start: 3;
}

.container > :nth-child(2) {
  grid-column-start: 2;
}

原理很简单，只需要精确指定每一行第一个元素的grid-column-start值就好了，在Grid布局中，每一行后面的元素只会自动跟随排列的。

如果是三个列表元素，那么第一行的首元素序列是1，因此选择器是:nth-child(1)，第二行的首元素序列是2，因此选择器是:nth-child(2)，最后一个元素自动跟随，无需专门设置。

实时渲染效果如下：

不限数量全自动蜂巢布局

由于Chrome浏览器支持了if函数，因此，纯CSS实现不限数量全自动蜂巢布局成为了可能，具体实现代码如下：

@property --_n {syntax: "<integer>";initial-value: 1;inherits: true}
@property --_i {syntax: "<number>";initial-value: 1;inherits: true}
@property --_j {syntax: "<number>";initial-value: 1;inherits: true}
@property --_c {syntax: "<number>";initial-value: 1;inherits: true}
@property --_d {syntax: "<number>";initial-value: 1;inherits: true}

.container {
  --s: 40px;  /* 尺寸大小  */
  --g: 5px;   /* 间隙大小 */
  
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--s) var(--s));
  justify-content: center;
  gap: var(--g);
  padding-bottom: calc((2 * var(--s) + var(--g)) / (4 * cos(30deg)));
  container-type: inline-size;
}
.container > * {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  margin-bottom: calc((2 * var(--s) + var(--g)) / (-4 * cos(30deg)));
  --_n: round(down, (100cqw + var(--g)) / (2 * (var(--s) + var(--g))));
  --_i: calc((sibling-index() - 2 + (var(--_n) * (3 - var(--_n))) / 2) / (2 * var(--_n) - 1));
  --_c: mod(var(--_i), 1);
  --_j: calc(sqrt(2 * sibling-index() - 1.75) - .5);
  --_d: mod(var(--_j), 1);
  grid-column-start: 
    if(
      style((--_i >= 1) and (--_c: 0)): 2; 
      style(--_d: 0): max(0, var(--_n) - var(--_j));
    );
}

先是根据容器尺寸和元素尺寸计算每行可以显示的数量，然后根据取模的值是不是整数，判断是不是每一行的第一项，通过if()函数设置精准的grid-column-start值。

原理虽然简单，但是实现细节还是很复杂的，比如大家无需深究，直接复制粘贴代码使用就可以了。

只需要将子元素换成图片元素，就可以轻松实现下图所示的蜂巢头像布局效果。

具体不展开，因为受制于兼容性限制，目前只能实验环境使用。

三、结语说明

前端三剑客中，CSS的发展是最快的，你看我写的新特性介绍文章，大多数都是CSS，并不是我刻意挑选，而真TM就是大多数前端新特性都是CSS。

考虑到CSS的学习热潮早就沉寂多年。

我觉得CSS这门语言离断层不远了，只要几年不关注，我跟大家讲，那些前沿的CSS代码，绝对是看不懂的。

各种新函数、属性还有语法糖层出不穷，就好比本文这个金字塔蜂巢布局中的CSS实现细节，我估计9成以上的前端是看不懂什么意思的。

其中出现的这些特性，我之前都有介绍：

1. corner-shape见此文：大开眼界的CSS corner-shape属性
2. aspect-ratio见此文：Chrome 88已经支持aspect-ratio属性了，学起来
3. round()、mod()等数学函数：Chrome也支持round等CSS数学函数了
4. cos()三角函数见：CSS sin()/cos()等数学三角函数简介与应用
5. sibling-index()索引序号函数介绍出处：CSS索引和数量匹配函数sibling-index sibling-count简介
6. if()函数介绍：CSS倒反天罡居然支持if()函数了
7. container-type和100cqw属于容器查询里面的知识：2022年最期待的CSS container容器查询

所以还是那句话，学习是不能停止的，时代变化很快，要是安于现状，说不定就会掉队。

参考文章：响应式金字塔网格

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12118

（本篇完）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12118
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

本文内容分为两啪，一个是六边形头像效果的实现，而是金字塔布局（又称蜂巢布局）的实现。

一、六边形头像

不啰嗦，直接看代码和最终实现的效果，同样的，用的是CSS corner-shape属性。

img {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: 150px;
  border: 1px solid #0001;
  object-fit: cover;
}

实时渲染效果如下：

如果你是手机访问，或者一些很久没升级的国产浏览器，应当看不到效果，可以看下面的截图：

六边形头像的CSS代码是固定的，大家使用的时候直接复制粘贴就好了。

二、蜂窝布局实现方法

六边形也正好是蜂巢格子的形状，因此，非常适合用来实现金字塔一样的蜂窝布局。

实际上，这种布局在日常开发中也是比较常见的，例如我最近开发的某个页面就有这样的布局：

一般的开发人员遇到这种状况，可能会手工硬搓每个元素的定位，例如，例如匹配第一项元素，让其绝对定位居中，第二行元素保持Flex布局。

.item:first-child {
  /* 第一行特殊居中处理 */
  position: absolute;
}

其实可以试试Flex倒序排版。

Flex实现蜂窝布局

假设HTML结构如下：

<div class="container">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>

则可以试试如下所示的CSS：

.container {
  --size: 40px;
  --gap: 5px;
  --offset: calc((2 * var(--size) + var(--gap)) / (-4 * cos(30deg)));

  width: 240px;
  display: flex;
  flex-wrap: wrap-reverse;
  direction: rtl;
  justify-content: center;
  gap: var(--gap);
  padding-bottom: calc(-1 * var(--offset));
}

.container > span {
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  width: calc(var(--size) * 2);
  margin-bottom: var(--offset);
  /* 排序倒序 */
  order: calc(-1 * sibling-index());
  /* 提示文字居中 */
  display: grid;
  place-items: center;
  background-color: deepskyblue;
  color: #fff;
}

此时的渲染效果如下截图所示：

不过Flex倒序只适合三个数量，如果超过，那么这个布局方法就无效了。

下面问题来了，有没有什么办法，无论列表数量多少，自动金字塔布局呢？

Grid实现蜂巢布局

有，Grid布局是可以实现这样的效果的。

我们先从最简单三个列表项开始实现，假设HTML代码如下：

<div class="container">
  <s></s>
  <s></s>
  <s></s>
</div>

如下CSS代码就可以有蜂窝布局效果了：

.container {
  --size: 40px;
  --gap: 5px;

  width: 240px;
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--size));
  justify-content: center;
  gap: var(--gap);
  padding-bottom: calc((2 * var(--size) + var(--gap)) / (4 * cos(30deg)));
  outline: 1px dotted;
}

.container > s {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  /* 垂直方向间隙和gap保持一致 */
  margin-bottom: calc((2 * var(--size) + var(--gap)) / (-4 * cos(30deg)));
  background-color: deepskyblue;
}

.container > :nth-child(1) {
  grid-column-start: 3;
}

.container > :nth-child(2) {
  grid-column-start: 2;
}

原理很简单，只需要精确指定每一行第一个元素的grid-column-start值就好了，在Grid布局中，每一行后面的元素只会自动跟随排列的。

如果是三个列表元素，那么第一行的首元素序列是1，因此选择器是:nth-child(1)，第二行的首元素序列是2，因此选择器是:nth-child(2)，最后一个元素自动跟随，无需专门设置。

实时渲染效果如下：

不限数量全自动蜂巢布局

由于Chrome浏览器支持了if函数，因此，纯CSS实现不限数量全自动蜂巢布局成为了可能，具体实现代码如下：

@property --_n {syntax: "<integer>";initial-value: 1;inherits: true}
@property --_i {syntax: "<number>";initial-value: 1;inherits: true}
@property --_j {syntax: "<number>";initial-value: 1;inherits: true}
@property --_c {syntax: "<number>";initial-value: 1;inherits: true}
@property --_d {syntax: "<number>";initial-value: 1;inherits: true}

.container {
  --s: 40px;  /* 尺寸大小  */
  --g: 5px;   /* 间隙大小 */
  
  display: grid;
  grid-template-columns: repeat(auto-fit, var(--s) var(--s));
  justify-content: center;
  gap: var(--g);
  padding-bottom: calc((2 * var(--s) + var(--g)) / (4 * cos(30deg)));
  container-type: inline-size;
}
.container > * {
  grid-column-end: span 2;
  aspect-ratio: cos(30deg);
  border-radius: 50% / 25%;
  corner-shape: bevel;
  margin-bottom: calc((2 * var(--s) + var(--g)) / (-4 * cos(30deg)));
  --_n: round(down, (100cqw + var(--g)) / (2 * (var(--s) + var(--g))));
  --_i: calc((sibling-index() - 2 + (var(--_n) * (3 - var(--_n))) / 2) / (2 * var(--_n) - 1));
  --_c: mod(var(--_i), 1);
  --_j: calc(sqrt(2 * sibling-index() - 1.75) - .5);
  --_d: mod(var(--_j), 1);
  grid-column-start: 
    if(
      style((--_i >= 1) and (--_c: 0)): 2; 
      style(--_d: 0): max(0, var(--_n) - var(--_j));
    );
}

先是根据容器尺寸和元素尺寸计算每行可以显示的数量，然后根据取模的值是不是整数，判断是不是每一行的第一项，通过if()函数设置精准的grid-column-start值。

原理虽然简单，但是实现细节还是很复杂的，比如大家无需深究，直接复制粘贴代码使用就可以了。

只需要将子元素换成图片元素，就可以轻松实现下图所示的蜂巢头像布局效果。

具体不展开，因为受制于兼容性限制，目前只能实验环境使用。

三、结语说明

前端三剑客中，CSS的发展是最快的，你看我写的新特性介绍文章，大多数都是CSS，并不是我刻意挑选，而真TM就是大多数前端新特性都是CSS。

考虑到CSS的学习热潮早就沉寂多年。

我觉得CSS这门语言离断层不远了，只要几年不关注，我跟大家讲，那些前沿的CSS代码，绝对是看不懂的。

各种新函数、属性还有语法糖层出不穷，就好比本文这个金字塔蜂巢布局中的CSS实现细节，我估计9成以上的前端是看不懂什么意思的。

其中出现的这些特性，我之前都有介绍：

1. corner-shape见此文：大开眼界的CSS corner-shape属性
2. aspect-ratio见此文：Chrome 88已经支持aspect-ratio属性了，学起来
3. round()、mod()等数学函数：Chrome也支持round等CSS数学函数了
4. cos()三角函数见：CSS sin()/cos()等数学三角函数简介与应用
5. sibling-index()索引序号函数介绍出处：CSS索引和数量匹配函数sibling-index sibling-count简介
6. if()函数介绍：CSS倒反天罡居然支持if()函数了
7. container-type和100cqw属于容器查询里面的知识：2022年最期待的CSS container容器查询

所以还是那句话，学习是不能停止的，时代变化很快，要是安于现状，说不定就会掉队。

参考文章：响应式金字塔网格

😉😊😇
🥰😍😘

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12118

（本篇完）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12026
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、事情的起因

之前介绍CSS锚点定位的时候有提到：

我们可以利用此特性，轻松实现任意两个点相连的折线效果，在过去，类似这样的效果一定要借助JS才可以。

然后我就抽空自己试验了自己的想法，发现此事并没有自己想的那么简单。

二、先看下效果

先看GIF录屏效果，纯CSS实现的：

演示页面

您可以狠狠地点击这里：纯CSS实现两个元素之间折线自动相连demo

实现原理

先从最简单的说起，两个圆和一条线。

<div class="circle circle-a"></div>
<div class="circle circle-b"></div>
<i class="line"></i> 

圆的样式很简单，50%圆角绝对定位就可以了，对于本文需要实现的效果，重要的是定义锚点的名称：

.circle-a {
  anchor-name: --a;
}
.circle-b {
  anchor-name: --b;
}

此时，我们的线就可以左右两个球定位了：

.line {
  position: absolute;
  --posA: calc(anchor(--a inside) + anchor-size(--a) / 2);
  --posB: calc(anchor(--b inside) + anchor-size(--b) / 2);
  top: var(--posA);
  bottom: var(--posB);
  left: var(--posA);
  right: var(--posB);
  outline: dashed;
}

此时的效果就会是这样的：

此时，我们就可以使用对角线渐变连接线条了（clip-path剪裁也可以）：

.line {
  background: linear-gradient(to left bottom, transparent calc(50% - 2px), currentColor calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat;
}

效果如下图所示：

这线都跑到圆球上了，怎么办？

可以遮罩处理下，正好端点弄两个径向渐变遮罩下。

.line {
  mask: radial-gradient(circle at 0 0, #000 85px, transparent 85px no-repeat, 
	  radial-gradient(circle at right bottom, #000 65px, transparent 65px no-repeat, 
	  linear-gradient(#000, #000);
}

原理还是很简单的，但是实际上，两个球的位置是不固定的，上下左右都有可能，所以，如果只考虑一个方位，那么两个球的位置变化的时候，直线可能就不显示，因此，最终是使用了4条线。

<div class="circle circle-a"></div>
<div class="circle circle-b"></div>
<i class="line line1"></i> 
<i class="line line2"></i> 
<i class="line line3"></i> 
<i class="line line4"></i>

完整代码可以参考demo页面。

三、其他一些说明

不过上面的实现并不完美，当两个圆的圆心在同一水平线，或者在同一垂直线上的时候，连接线是不显示的。

这个其实也有方法解决，不过麻烦了些。

1. 需要在设置line为container容器元素；
2. 图形效果使用子元素绘制，同时设置最小尺寸；
3. 基于 100cqw 和 100cwh计算的角度判断子元素是否显示，利用opacity属性的边界特性。

有个codepen案例就是这么实现的，有兴趣可以研究下。

时间有限，我就不深入了，因为这个实现成本已经超过JS了。

好吧，就说这么多，如果觉得内容不错，欢迎转发，分享。

我们下一篇文章再见👋🏻

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12026

（本篇完）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12026
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、事情的起因

之前介绍CSS锚点定位的时候有提到：

我们可以利用此特性，轻松实现任意两个点相连的折线效果，在过去，类似这样的效果一定要借助JS才可以。

然后我就抽空自己试验了自己的想法，发现此事并没有自己想的那么简单。

二、先看下效果

先看GIF录屏效果，纯CSS实现的：

演示页面

您可以狠狠地点击这里：纯CSS实现两个元素之间折线自动相连demo

实现原理

先从最简单的说起，两个圆和一条线。

<div class="circle circle-a"></div>
<div class="circle circle-b"></div>
<i class="line"></i> 

圆的样式很简单，50%圆角绝对定位就可以了，对于本文需要实现的效果，重要的是定义锚点的名称：

.circle-a {
  anchor-name: --a;
}
.circle-b {
  anchor-name: --b;
}

此时，我们的线就可以左右两个球定位了：

.line {
  position: absolute;
  --posA: calc(anchor(--a inside) + anchor-size(--a) / 2);
  --posB: calc(anchor(--b inside) + anchor-size(--b) / 2);
  top: var(--posA);
  bottom: var(--posB);
  left: var(--posA);
  right: var(--posB);
  outline: dashed;
}

此时的效果就会是这样的：

此时，我们就可以使用对角线渐变连接线条了（clip-path剪裁也可以）：

.line {
  background: linear-gradient(to left bottom, transparent calc(50% - 2px), currentColor calc(50% - 2px) calc(50% + 2px), transparent calc(50% + 2px)) no-repeat;
}

效果如下图所示：

这线都跑到圆球上了，怎么办？

可以遮罩处理下，正好端点弄两个径向渐变遮罩下。

.line {
  mask: radial-gradient(circle at 0 0, #000 85px, transparent 85px no-repeat, 
	  radial-gradient(circle at right bottom, #000 65px, transparent 65px no-repeat, 
	  linear-gradient(#000, #000);
}

原理还是很简单的，但是实际上，两个球的位置是不固定的，上下左右都有可能，所以，如果只考虑一个方位，那么两个球的位置变化的时候，直线可能就不显示，因此，最终是使用了4条线。

<div class="circle circle-a"></div>
<div class="circle circle-b"></div>
<i class="line line1"></i> 
<i class="line line2"></i> 
<i class="line line3"></i> 
<i class="line line4"></i>

完整代码可以参考demo页面。

三、其他一些说明

不过上面的实现并不完美，当两个圆的圆心在同一水平线，或者在同一垂直线上的时候，连接线是不显示的。

这个其实也有方法解决，不过麻烦了些。

1. 需要在设置line为container容器元素；
2. 图形效果使用子元素绘制，同时设置最小尺寸；
3. 基于 100cqw 和 100cwh计算的角度判断子元素是否显示，利用opacity属性的边界特性。

有个codepen案例就是这么实现的，有兴趣可以研究下。

时间有限，我就不深入了，因为这个实现成本已经超过JS了。

好吧，就说这么多，如果觉得内容不错，欢迎转发，分享。

我们下一篇文章再见👋🏻

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12026

（本篇完）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11972
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、CSS锚点定位的不足

CSS锚点定位是非常强大且实用的CSS新特性，这个特性我去年就介绍过，参见“全新的CSS Anchor Positioning锚点定位API”

虽然强大，但不完美。

这个问题我在升级LuLu UI的Select组件的的时候也遇到过，看下图一目了然：

看箭头指示的那里，圆角是在上面的，实际上，当列表朝上的时候（底部空间不足），圆角应该在左下方和右下方。

为什么会出现这种情况，那就是因为CSS锚点定位使用候补定位的时候，开发人员是不知道的，就没有在使用候补定位的时候进行专门的处理。

在上面的例子中，LuLu UI下拉框朝上的样式处理最后还是放弃了锚点定位的候补位置方法。

不过，现在，Chrome 143+新支持了一个特性，可以实现锚定容器回退检测了。

二、回退检测语法的使用

CSS锚点定位的回退检测使用很简单。

第一步，设置容器类型为anchored，同时指定自动回退的方位类型，这个对应的CSS属性是position-try-fallbacks属性，例如设置边界自动垂直翻转：

.float-element {
  position-try-fallbacks: flip-block;
  container-type: anchored;
}

第二步，使用@container anchored()函数进行匹配，示意：

@container anchored(fallback: flip-block) {
  .float-element {
    /* 如果垂直定位方向改变，如何如何…… */
  }
}

就可以了！

三、fallback案例

最好的学习方法还是案例，您可以狠狠地点击这里：CSS锚点定位回退检测与tooltip效果实现demo

在默认状态下，黑色提示框是在上面的，箭头朝下。

随着滚动进行，当提示框触碰到浏览器上边缘的时候，提示框的位置就会使用候补位置，垂直翻转，此时，大家可以看到箭头位置朝上了，这就是用的新的语法实现的。

以上效果需要Chrome 143+浏览器支持，如果您的浏览器不满足条件，也可以查看下面的GIF录屏效果，体会我说的意思。

实现代码

HTML代码如下：

<span class="tooltip">我是提示内容</span>
<button class="anchor">我是按钮</button>

CSS完整代码：

.anchor {
  anchor-name: --my-anchor;
}

/* 提示浮层元素 */
.tooltip {
  position: fixed;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  /* 垂直方向翻转 */
  position-try-fallbacks: flip-block; 
  /* 设置为锚点查询容器类型 */
  container-type: anchored;

  /* 向上小三角效果 */
  &::before {
    content: '';
    position: absolute;
    bottom: 100%; 
    inset-inline: 0;
    width: 1em;
    margin-inline: auto;
    aspect-ratio: 3/2;
    clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    background: inherit;
  }
  background: #121212;
  color: #fff;
  padding: 4px 8px;
}

/* 如果触发了垂直翻转 */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* 小三角翻转，定位调整 */
    scale: 1 -1;
    bottom: auto;
    top: 100%;
  }
}

四、点到为止、结语

关于CSS锚点定位容器查询，本文就先说这么多，不做进一步展开，为什么呢？

很简单，兼容性还很一般，目前Chrome 143才支持，而Chrome 143就是最近的正式版本。

考虑到我现在的年纪，不知道有生之年，有没有可能在正式项目中使用这个特性。

嘿嘿！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11972

（本篇完）

by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=11972
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、CSS锚点定位的不足

CSS锚点定位是非常强大且实用的CSS新特性，这个特性我去年就介绍过，参见“全新的CSS Anchor Positioning锚点定位API”

虽然强大，但不完美。

这个问题我在升级LuLu UI的Select组件的的时候也遇到过，看下图一目了然：

看箭头指示的那里，圆角是在上面的，实际上，当列表朝上的时候（底部空间不足），圆角应该在左下方和右下方。

为什么会出现这种情况，那就是因为CSS锚点定位使用候补定位的时候，开发人员是不知道的，就没有在使用候补定位的时候进行专门的处理。

在上面的例子中，LuLu UI下拉框朝上的样式处理最后还是放弃了锚点定位的候补位置方法。

不过，现在，Chrome 143+新支持了一个特性，可以实现锚定容器回退检测了。

二、回退检测语法的使用

CSS锚点定位的回退检测使用很简单。

第一步，设置容器类型为anchored，同时指定自动回退的方位类型，这个对应的CSS属性是position-try-fallbacks属性，例如设置边界自动垂直翻转：

.float-element {
  position-try-fallbacks: flip-block;
  container-type: anchored;
}

第二步，使用@container anchored()函数进行匹配，示意：

@container anchored(fallback: flip-block) {
  .float-element {
    /* 如果垂直定位方向改变，如何如何…… */
  }
}

就可以了！

三、fallback案例

最好的学习方法还是案例，您可以狠狠地点击这里：CSS锚点定位回退检测与tooltip效果实现demo

在默认状态下，黑色提示框是在上面的，箭头朝下。

随着滚动进行，当提示框触碰到浏览器上边缘的时候，提示框的位置就会使用候补位置，垂直翻转，此时，大家可以看到箭头位置朝上了，这就是用的新的语法实现的。

以上效果需要Chrome 143+浏览器支持，如果您的浏览器不满足条件，也可以查看下面的GIF录屏效果，体会我说的意思。

实现代码

HTML代码如下：

<span class="tooltip">我是提示内容</span>
<button class="anchor">我是按钮</button>

CSS完整代码：

.anchor {
  anchor-name: --my-anchor;
}

/* 提示浮层元素 */
.tooltip {
  position: fixed;
  margin-top: 1rem;
  position-anchor: --my-anchor;
  position-area: bottom;
  /* 垂直方向翻转 */
  position-try-fallbacks: flip-block; 
  /* 设置为锚点查询容器类型 */
  container-type: anchored;

  /* 向上小三角效果 */
  &::before {
    content: '';
    position: absolute;
    bottom: 100%; 
    inset-inline: 0;
    width: 1em;
    margin-inline: auto;
    aspect-ratio: 3/2;
    clip-path: polygon(50% 0, 100% 100%, 0% 100%);
    background: inherit;
  }
  background: #121212;
  color: #fff;
  padding: 4px 8px;
}

/* 如果触发了垂直翻转 */
@container anchored(fallback: flip-block) {
  .tooltip::before {
    /* 小三角翻转，定位调整 */
    scale: 1 -1;
    bottom: auto;
    top: 100%;
  }
}

四、点到为止、结语

关于CSS锚点定位容器查询，本文就先说这么多，不做进一步展开，为什么呢？

很简单，兼容性还很一般，目前Chrome 143才支持，而Chrome 143就是最近的正式版本。

考虑到我现在的年纪，不知道有生之年，有没有可能在正式项目中使用这个特性。

嘿嘿！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=11972

（本篇完）