如何在CSS Grid中创建灵活的纯CSS箭头Div？

当然没问题！原示例是利用边框绘制三角形的经典技巧，我们可以在此基础上优化，让元素更灵活，完全能适配CSS Grid这类布局场景。

原方法原理回顾 #

原代码通过将元素宽高设为0，利用边框的梯形特性（宽高为0时边框会收缩成三角形）实现了四个方向的三角形：

#triangles {
  margin: 3em;
  width: 0; /* 宽高设为0，让边框完全贴合 */
  height: 0;
  border-color: red blue green yellow; /* 上、右、下、左边框颜色 */
  border-style: solid;
  border-width: 50px; /* 边框宽度决定三角形的大小 */
}

<div id="triangles"></div>

但这种方法的局限性是尺寸固定，很难自适应容器（比如CSS Grid单元格）的大小。接下来分享几种更灵活的实现方式：

方案1：伪元素+边框实现自适应三角形 #

这种方式能让三角形大小随容器尺寸变化，完美适配Grid单元格：

/* 上方向三角形示例 */
.triangle-up {
  width: 100%;
  height: 0;
  padding-left: 50%;
  padding-top: 50%;
  overflow: hidden;
  position: relative;
}

.triangle-up::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-left: 50vw solid transparent;
  border-right: 50vw solid transparent;
  border-bottom: 50vw solid red;
  transform: translateX(-50%);
}

/* CSS Grid 布局示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
  padding: 1em;
}

.grid-cell {
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
}

<div class="grid-container">
  <div class="grid-cell">
    <div class="triangle-up"></div>
  </div>
  <!-- 可添加更多不同方向的三角形单元格 -->
</div>

方案2：用clip-path绘制自定义三角形 #

clip-path是更现代的方案，能创建任意形状的三角形，灵活性拉满，完全适配Grid布局：

.triangle-custom {
  width: 100%;
  height: 100%;
  background-color: blue;
  /* 上三角坐标，可修改数值调整形状、比例 */
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Grid 适配样式 */
.grid-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1;
}

<div class="grid-container">
  <div class="grid-cell">
    <div class="triangle-custom"></div>
  </div>
</div>

这种方法的优势很明显：

• 只需修改polygon()的坐标，就能轻松调整三角形的形状、比例
• 元素可直接占满Grid单元格空间，自适应容器大小
• 支持设置背景色、渐变甚至背景图片

方案3：CSS变量控制的灵活边框三角形 #

通过CSS变量让边框三角形的大小、颜色可动态调整，适配不同Grid单元格：

.triangle-flex {
  width: 0;
  height: 0;
  border-color: var(--tri-color, green) transparent transparent transparent;
  border-style: solid;
  border-width: var(--tri-size, 40px) var(--tri-size, 40px) 0 0;
}

/* Grid单元格中自定义样式 */
.grid-cell:nth-child(1) {
  --tri-size: 50px;
  --tri-color: orange;
}
.grid-cell:nth-child(2) {
  --tri-size: 30px;
  --tri-color: purple;
}

这些方案都能完美融入CSS Grid布局，你可以根据实际需求选择最适合的方式~

内容的提问来源于stack exchange，提问作者arw89