Question

所以，尽管这很有趣，但我最近才发现了使用元素边框的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（）函数，但没有效果。关于导致这个内容的原因有什么想法，或者为什么我的功能没有被解雇？我怀疑它与显示内联块有关，但我对如何将其修复为显示感到茫然：内联块是div正确显示的唯一方法。

Answer 1

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

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

http://jsfiddle.net/TDcuD/

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

Answer 2

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

LIVE DEMO

响应式CSS三角形jQuery无法正常工作

2 个答案: