css - 带箭头的 jQuery UI 工具提示，此代码为何/如何工作？

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;
 }

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

为什么或如何运作？ 不明白为什么在没有任何变换规则的情况下好像是变换了45度？

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

任何想法/解释？

Answer 1

一个很好的解释是:

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

或

http://davidwalsh.name/css-triangles

我想他们说了所有你需要知道的关于 css 三 Angular 形的知识