Question

我试图围绕下面的例子 http://jsfiddle.net/marlonpp/HkTE9/1/

这是示例使用的CSS

  body { padding: 20px; }

/*input[type="button"] { margin: 100px 0 0 10px; }*/
input[type="button"] { margin: 10px 0 0 10px; }

.ui-tooltip {
    font-family: arial, sans-serif;
    color: #000;
    font-size: 14px;
    padding: 5px 20px;
    position: absolute;
    background: white;
    border: 1px solid #767676;
    max-width: 180px;
    z-index: 9999;

}

.ui-tooltip-content::after, .ui-tooltip-content::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
}

.bottom .ui-tooltip-content::after {
    border-color: rgba(118, 118, 118, 0);
    border-top-color: white;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}

.bottom .ui-tooltip-content::before {
    border-color: rgba(118, 118, 118, 0);
    border-top-color: #767676;
    border-width: 11px;
    left: 50%;
    margin-left: -11px;
}

.top .ui-tooltip-content::after {
    top: -10px;
    left: 50%;
    border-color: white transparent;
    border-width: 0 10px 10px;
    margin-left: -10px;
}

.top .ui-tooltip-content::before {
     border-color: rgba(118, 118, 118, 0);
     border-bottom-color: #767676;
     top: -11px;
     left: 50%;
     border-width: 0 11px 11px;
     margin-left: -11px;
 }

它为工具提示创建了一个漂亮的三角形箭头，并且它带有边框。我真的不明白的一件事：

为什么或如何运作？我不明白为什么它似乎在没有任何转换规则的情况下被转换为45度？

我试图采用这个例子并为左侧和右侧创建一个箭头但是因为我不知道它是如何工作的，所以我失败了。

任何想法/解释？

Answer 1

一个很好的解释是：

https://css-tricks.com/snippets/css/css-triangle/

或

http://davidwalsh.name/css-triangles

我认为他们说你需要知道关于css三角形的所有内容

带箭头的jQuery UI工具提示，为什么/这个代码如何工作？

1 个答案: