javascript - 创建一个三 Angular 形朝下的动态 div

Question

我正在尝试构建一个 Div，它有一个像箭头一样向下的三 Angular 形。 我成功地使用了 div:after 并从该 div 构建了一个三 Angular 形。

问题是，一旦我围绕新三 Angular 形移动屏幕，它就不会考虑原始三 Angular 形的新宽度。我将不得不使用宽度作为 border 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;
}