在div的右上角创建指针或箭头

Question

如何使用CSS和/或JQuery（包括JQueryUI

）执行此操作

但不是mooTools ....

我一直在尝试使用CSS：之前：之后：arrow.top等。 我可以得到一个箭头，有时会旋转一个矩形，有时会旋转 a：之前但是切换参数以尝试获得正确的位置 似乎没有把它放在正确的地方。

我的页面顶部只有一个按钮，我想点击它 并使用$("ul li div)元素加载div。

我认为缺少这种UI元素的特定术语是原因 我很难描述我想要的东西。 '箭'或'指针'也是 通用的。我也尝试使用Jquery UI工具提示，但我无法加载它 从AJAX调用中获取的ul-＆gt; li项列表。还在玩 JQuery UI对话框。也许是因为我试图在许多不同的方面做到这一点 方法。我想我应该从一些div开始并从那里开始工作。

无论如何一张图片值1000字，所以这里有一个例子.....我会删除 我的另一个问题。

Answer 1

您的问题不明确，但我认为您需要this :

之类的内容

HTML：

<div class="containner">
    Hello
    <div class="arrow arrow-right"></div>
    <div class="clear"></div>
</div>

CSS：

.containner {
    width:100px;
    height;100px;
    border:solid black 1px;
    text-align:center;
    cursor:pointer;
    background:#ccc;
    color:#fff;
}
.arrow-right {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #fff;
    float:right;
}

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff;
    float:right;
    margin-top: 5px;
}

.clear {
    clear:both;
    font-size:1px;
}

JS：

$('.containner').on('click', function(){
    // other code
    $(this).find('.arrow').toggleClass('arrow-right arrow-down')
});