<分区>
所以，尽管这很有趣，但我最近才发现使用元素边框的 CSS 三 Angular 形的概念。我正在尝试在我的自定义 Wordpress 主题之一中实现此功能，但遇到了问题。我想在 div 的底部添加一个三 Angular 形(有点像横幅)，但是那个 div 包含可以由用户设置的文本，所以我不能硬编码框和三 Angular 形的宽度.这导致我使用 jQuery 来尝试获取框的宽度，并适本地调整三 Angular 形的大小。当我第一次尝试使用一个简单的脚本将两个边框设置为总父宽度的一半时，我似乎遇到了一个问题，即框会随着元素加载而自行调整大小(似乎字体加载速度很慢)。我只是简单地包装了脚本以在元素调整大小时触发，但它似乎没有触发。这导致我的三 Angular 形保持大于它下面的框。你可以在这里看到效果:
http://dev3.thoughtspacedesigns.com
这是我的代码:
HTML
<div id="logo-box">
<h1><?php bloginfo('name'); ?></h1>
<div id="logo-box-point"></div>
</div>
CSS
#logo-box{
background:#374140;
display:inline-block;
padding:20px;
position:relative;
}
#logo-box h1{
color:#f2f2f2;
}
#logo-box-point{
content: ' ';
width:0px;
height:0px;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-top:25px solid #374140;
border-bottom:0;
position:absolute;
bottom:-25px;
left:0px;
z-index:2;
}
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() 函数，但没有效果。关于导致此内容跳跃的原因，或者为什么我的功能没有触发的任何想法？我怀疑它与显示内联 block 有关，但我不知道如何修复它，因为 display:inline-block 是 div 正确显示的唯一方法。
最佳答案
调整大小不会触发这样的元素，使用:
$(window).resize(function(){
triangleSize();
}
注意:您的代码似乎也没有考虑 DIV 的填充，这是我在 fiddle 中完成的。
关于jquery - 响应式 CSS 三 Angular 形 jQuery 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18109369/