0

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

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() 函数，但没有效果。关于导致此内容跳转的原因或为什么我的函数没有触发的任何想法？我怀疑它与显示内联块有关，但我不知道如何将其修复为 display:inline-block 是 div 正确显示的唯一方式。

4

2 回答 2

1

调整大小不会在这样的元素上触发，使用：

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

http://jsfiddle.net/TDcuD/

注意：您的代码似乎也没有考虑 DIV 的填充，这是我在小提琴中完成的。

于 2013-08-07T17:59:09.433 回答
0

你也可以使用普通的 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');
    }

现场演示

于 2013-08-07T17:05:35.517 回答