jQuery UI 带箭头的工具提示，why/how 此代码有效吗？

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度？

我试图以这个例子为左侧和右侧创建一个箭头，但由于我一开始就不知道它是如何工作的，所以我失败了。

任何ideas/explanations？

Answer 1

一个很好的解释是：

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

或

http://davidwalsh.name/css-triangles

我想他们说了所有关于 css 三角形的知识

jQuery UI 带箭头的工具提示，why/how 此代码有效吗？

jQuery UI Tooltip with Arrow, why/how does this code work?

css

jquery-ui

tooltip