0

面白いことに、要素の境界線を使用した CSS トライアングルの概念を最近見つけました。カスタムの Wordpress テーマの 1 つにこれを実装しようとしていますが、問題が発生しています。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が正しく表示される唯一の方法はdisplay:inline-blockであるため、修正方法がわかりません。

4

2 に答える 2

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 に答える