怎么在css中利用定位制作三角形指示器_使用border技巧配合absolute-css教程-PHP中文网

用border画三角形是因为浏览器将宽高为0元素的单色边框渲染为等腰直角三角形；配合position: absolute和transform可精准定位，关键需父容器设relative、三角形设transparent边框及合理top/left/transform组合。

怎么在css中利用定位制作三角形指示器_使用border技巧配合absolute

为什么用 `border` 能画出三角形

因为 CSS 的边框在交界处是斜角渲染的，当元素宽高为 0，只设置单侧边框（比如 border-bottom），其余三边设为透明或无色时，那个有颜色的边框就会收缩成一个等腰直角三角形。这是浏览器渲染机制决定的，不是 hack，兼容性极好（IE6+ 都支持）。

关键点：width 和 height 必须为 0；非目标方向的 border 必须设为 transparent 或 none；有颜色的那条边宽度决定了三角形大小。

怎么用 `position: absolute` 精准定位三角形

三角形本身是伪元素或空 <span></span>，需要脱离文档流并相对于父容器对齐。常见做法是给父容器加 position: relative，再让三角形用 absolute 定位。

容易踩的坑：

忘了给父元素设 position: relative，导致三角形相对 body 或最近有定位的祖先定位，偏移不可控
用 top/left 直接硬调，不如用 transform: translate() 微调更稳定（尤其当父容器有 padding 或 border 时）
三角形默认基线在左上角，想居中对齐时别只靠 left: 50%，要配合 transform: translateX(-50%)

向下指的三角形（常见于下拉菜单箭头）示例

假设父容器类名是 .dropdown，三角形用伪元素实现：

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

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

下载

.dropdown {
  position: relative;
}
.dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #333;
}

说明：