CSS 设计问题 - 在特定 position 中为 div 添加一个小的背景图像

Question

To clarify, I made the following diagram:

Basically I have a bordered div, which is clickable. After clicking it, I want to (through javascript) create a new div which has a protruding arrow shaped border into the clicked div.

Any ideas as to how I would create such a border? I'm not worried about the javascript. Just how to actually create such a border.

Answer 1

You can use the CSS Triangle approach (Lots of examples online, here's one from CSS Tricks ), where you have an empty div inside your tooltip that uses some clever border manipulation to make the angle. Just position the div , and you're done!

Answer 2

Check out the below example, after clicking the link either you append the "after-click-div" or show it. The arrow div is positioned with negative margin over the border.

<div class="container">
  <a href="#">Link</a>
  <div id="after-click-div" style="border: 1px solid #000; position: relative;">
    <div class="arrow" style="background: #fff url(arrow.gif) no-repeat; position: absolute; top: -10px; right: 10px; width: 10px; height: 10px"></div>
   content
  </div>
</div>

Or you can save an image like this _ __ _ __ ^ _ and assign it as a background image to the after_click_div like background: url(arrow.gif) no-repeat top right

Answer 3

I tried to make it as close to your drawing beautiful diagram as possible, but I wasn't quite able to get the arrow's hrm... unique angle.

http://jsfiddle.net/WJtnM/

HTML

<div id="b"> <span class="g">BEFORE CLICK</span>&nbsp; 
    <div id="f"> AFTER CLICK </div>
    <div class="c" id="d"></div>
    <div class="c" id="e"></div>
</div>

CSS

#b
{
    position:relative;
    padding:28px 20px 12px 60px;
    width:170px;
    border:1px solid black;
}
.c
{
    position:absolute;
    bottom:100%;
    right:30px;

    width:0px;
    height:0px;
    border: 20px solid transparent;
}
.c#d
{
    border-bottom-color: black;
}
.c#e
{
    border-bottom-color: white;
    margin-bottom: -1px;
}

#f
{
    position:absolute;
    padding:35px 20px 12px 60px;
    width:170px;
    border:1px solid black;
    border-bottom-width: 0px;
    bottom:100%;
    left:-1px;
}

jQuery

$("#b").click(function(){

    $(".c,#f,.g").toggle();

})

Answer 4

The arrow border have to be an image and it have to take a z-index.