响应CSS三角形jQuery不工作

有趣的是，我最近发现了使用元素边界的CSS三角形的概念。我试图在我的一个自定义Wordpress主题中实现这一点，但我遇到了一个问题。我试图在div的底部添加一个三角形（有点像横幅），但该div包含用户可以设置的文本，因此我无法硬编码框的宽度和三角形。这导致我使用jQuery来尝试获取框的宽度，并适当地调整三角形的大小。当我第一次尝试使用一个简单的脚本将两个边框设置为总父宽度的一半时，我似乎遇到了一个问题，即在加载元素时框会自动调整大小（似乎字体加载速度较慢）。我只是简单地将脚本包装为在元素调整大小时触发，但是它似乎没有触发。这使得我的三角形比它下面的盒子大。您可以在此处看到效果：

这是我的密码：

HTML

jQuery

$(function(){
    function triangleSize(){
            var logoBoxWidth = $("#logo-box").width();
            $("#logo-box-point").css({"border-left-width":logoBoxWidth/2, "border-right-width":logoBoxWidth/2});
    }
    triangleSize();
    $("#logo-box").resize(function(){
            triangleSize();
    }
    );
}
);

---

我还尝试了使用.change（）函数，但没有效果。有没有关于是什么导致了内容跳跃，或者为什么我的函数没有启动的想法？我怀疑它与显示内联块有关，但我不知道如何将其修复为显示：内联块是div正确显示的唯一方式。

您也可以使用纯css来完成

 div
    {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 30px 338px 0 338px;
    border-color: #007bff transparent transparent transparent;
    line-height: 0px;
    _border-color: #007bff #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }

---

如果无法在这样的元素上触发调整大小，请使用：

$(window).resize(function(){
        triangleSize();
}

---

注意：您的代码似乎也没有考虑到DIV的填充，我在小提琴中已经做过了。

请不要链接到live代码。一旦那一页改变，你的问题就没有用了。不管怎样，这个问题在被回答的时候都是没有用的。这是一个不适用于其他情况的特定示例。请将其删除。这显然是离题的。堆栈溢出的全部目的是为常见问题提供规范的答案，而不是帮助个人调试一次性场景。对于那些对响应CSS三角形感兴趣的人来说，这个问题始终是相关的，但这个特定的应用程序涉及到一个小错误，可能是某个地方的CSS/代码小问题。这将是一个宝贵的资源，为那些寻找方法，使响应CSS三角形。我不是在寻找一个论点，只是第二对眼睛。我得到了很多，但我的三角形是响应的，不是静态宽度。看看这个插件。。这很酷，我可能会考虑使用它，但对于一个三角形的实现来说似乎有点过分。我很想看看我的代码中存在的问题。谢谢你的资源！如果logowidth为602px..公式将正确..它是否根据屏幕大小响应..#logo框中的文本可以更改网站标题上的dpenent。宽度不会总是一样的。决定走另一条路线。谢谢你。这实际上不是我想要的，但它是一个很好的答案。将其标记为已解决。

 div
    {
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 30px 338px 0 338px;
    border-color: #007bff transparent transparent transparent;
    line-height: 0px;
    _border-color: #007bff #000000 #000000 #000000;
    _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000');
    }

$(window).resize(function(){
        triangleSize();
}