创建带向下箭头三角形的动态div实现方案咨询

嘿，我完全懂你遇到的麻烦——用border属性做的三角形虽然简单，但确实没法自动跟着父Div的宽度变化而伸缩，毕竟border的尺寸参数没法直接绑定父元素的宽度对吧？别担心，这里有几个更灵活的方案，都能实现自适应宽度的向下箭头，而且不用依赖固定的border数值：

方法1：CSS线性渐变（Linear Gradient） #

用渐变可以直接画出自适应宽度的三角形，原理是利用渐变的角度和颜色断点来形成三角形形状，伪元素设置宽度100%就能完全跟随父Div宽度：

.parent-div {
  position: relative;
  width: 80%; /* 可以是任意宽度，包括响应式的百分比 */
  height: 50px;
  background: #f0f0f0;
  margin: 20px auto;
}

.parent-div:after {
  content: '';
  position: absolute;
  bottom: -20px; /* 三角形的高度 */
  left: 0;
  width: 100%;
  height: 20px;
  background: linear-gradient(to bottom right, transparent 50%, #f0f0f0 50%),
              linear-gradient(to bottom left, transparent 50%, #f0f0f0 50%);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  background-position: left top, right top;
}

这个方法兼容性很好，几乎支持所有现代浏览器，而且颜色能和父Div完全匹配。

方法2：CSS Clip-Path属性 #

Clip-path可以直接定义元素的可见区域，用多边形路径来绘制三角形，同样能做到宽度100%自适应：

.parent-div {
  position: relative;
  width: 60%;
  height: 50px;
  background: #42a5f5;
  margin: 20px auto;
}

.parent-div:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background: #42a5f5;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

这种方法代码更简洁，而且可以轻松调整三角形的形状（比如改变顶点位置），唯一要注意的是旧版IE不支持，但现代浏览器都没问题。

方法3：SVG背景（最灵活） #

用SVG作为伪元素的背景，矢量图形天生支持任意缩放，完全不用担心适配问题，还能轻松修改颜色、形状：

.parent-div {
  position: relative;
  width: 70%;
  height: 50px;
  background: #66bb6a;
  margin: 20px auto;
}

.parent-div:after {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 20'%3E%3Cpolygon points='0,0 100,0 50,20' fill='%2366bb6a'/%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

这里用了Data URI嵌入SVG，不用额外文件，颜色可以通过修改fill属性来匹配父元素，而且SVG可以随意编辑形状，比如把箭头做的更尖或者更宽。

这三种方法都能完美解决你遇到的响应式适配问题，根据你的浏览器兼容性要求和需求复杂度选就行～

内容的提问来源于stack exchange，提问作者Lucas Janequine BuyachakaDogg