0

デザイン要素
私はそのようなデザイン要素を持っています。ページ上でそれを作成する方法は？私の最初の推測は、三角形の画像を作成し、次のように要素の右側に追加することでした。

.profile-menu :hover
{
    background-color: #50BBFF;
    background-image: url("/Images/menu-triangle.png") ;
    background-position: right center; 
    background-repeat: no-repeat; 
    background-position: 145px 15px;
}

ただし、ここでの問題は、三角形が要素の境界を通過した後に非表示になることです。z-indexはここでは役に立ちません。それを達成する方法は確かにいくつかあることを私は知っていますが、それを見つけることができません。

4

2 に答える 2

2

実際には、CSS3 の複数の背景画像を使用して、背景画像だけでこれを行うことができます。

昨日、ここで見ることができる例をまとめました。ボックスの寸法がわかっている場合は、この方法を使用できます。

http://jsfiddle.net/spacebeers/T8Yzj/39/

.box3 {
    z-index: 100;
    border: none;
    padding: 10px 0 30px 0;    
    background-image: url("http://test.mark-design.co.uk/4ik4e7ic.png"), url('http://test.mark-design.co.uk/line.png');
    background-position: 50% -1px, left top;
    background-repeat: no-repeat, repeat-x;
}

編集：

また、画像なしでやりたいことを正確に行うこともできます- http://jsfiddle.net/spacebeers/T8Yzj/55/

.box2 {
    width: 100px;
    height: 50px;
    background: red;
    color: white;
    position:relative
}

.box2:after {
    content: "";
    position:absolute;
    width: 0;
    height: 0;
    bottom: 25%;
    left:100px;
    border-left: 10px solid #000;
    border-right: 10px solid transparent;   
    border-bottom: 10px solid transparent;    
    border-top: 10px solid transparent;
}
于 2012-07-26T08:13:38.797 に答える
2

まず、http://cssarrowplease.com/をご覧ください 。背景画像をそれを含む div を超えて作成することはできません。そのため、青いボックスと三角形を含めて、ボタン全体を 1 つの画像にしないでください。 ?

または、絶対に 2 つのオブジェクトが必要な場合は、それらをラップすることができます。

<div>
    <div class="blue-box"></div>
    <div class="triangle"></div>
</div>
于 2012-07-26T08:08:29.107 に答える