css - 带阴影的 Css 箭头

Question

请考虑以下小提琴。我正在尝试在标注底部创建一个带有阴影的箭头。这是有效的：

http://jsfiddle.net/tmcconechy/vT4rj/

但是，如果我想通过设置根的左/上/宽来移动对话框。

left: 9px;
position: absolute;
top: 36px;

然后 :after 箭头不在位置。我可以看到处理此问题的方式是将 after: 元素设置为position: relative;top: 100%. 但是，一旦我这样做，形状箭头就坏了？

无论如何我可以处理这个，所以箭头位置是相对于盒子大小和位置的？

Answer 1

试试这个。

我所做的只是在你想要的那个周围放置一个相对定位的 div，这就是你移动的 div。根据MDN，只要有一个祖先 div 被定位，您的绝对定位就会脱离祖先的位置。

html:

<div class="positioner" style="position: relative; top: 200px;">
    <div class="inline-popup"></div>
</div>

Answer 2

我通过将箭头上的左侧位置更改为 50% 而不是固定的 px 来实现这一点。

left: 50%;

h/t http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 3

您应该将此箭头保持在绝对位置，以便您可以轻松地将其设置在您想要的任何位置。

要将其从下到上移动，例如将顶部位置和反向框阴影：http:
//jsfiddle.net/vT4rj/1/
，然后更改边框：http:
//jsfiddle.net/vT4rj/3/

.inline-popup:after {
    background: none repeat scroll 0 0 #FFFFFF;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #CCCCCC;
    box-shadow: 1px -1px 0px rgba(0, 0, 0, 0.30);
    content: "";
    height: 18px;
    left: 176px;
    position: absolute;
    top: -9px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    width: 18px;
}