创建一个三角形朝下的动态div

Question

我正在尝试构建一个Div，其三角形指向箭头。 我成功地使用了div:after并从该div中构建了一个三角形。

问题是，一旦我围绕新三角形移动屏幕，它就不会考虑原始三角形的新宽度。我必须使用宽度作为边框CSS属性的参数。

还有其他方法可以实现这一目标吗？我创建了一个小图片，解释了我正在寻找的数字究竟是什么。

Answer 1

这是老式的jquery解决方案：

https://jsfiddle.net/zLb4a08e/2/

JS + jQuery：

function recalcBorders() {
   var parentWidth = $(".parent").width();
   $('.triangle').css({
      "border-top" : parentWidth / 2 + "px solid blue",
      "border-left" : parentWidth / 2 + "px solid transparent",
      "border-right": parentWidth / 2 + "px solid transparent"
    });
}

$(window).on('resize', function(){
   recalcBorders();
});

$(function(){
  recalcBorders();
});

HTML：

<div class="parent">
</div>

<div class="triangle">
</div>

CSS：

.parent {
  width: 100%;
  background: green;
  height: 100px;
  position: relative;
}

.triangle {
  position: absolute;
}