伪元素使用:: before overflow的父元素高度

Question

Plunker代码为here。

我尝试创建一个语音气泡，其顶角和底角与父元素的角相同。

伪元素道具是，

private final Context mContext = this;

我看到了问题，

1）伪元素未被裁剪为父元素的高度

2）伪元素并非完全来自父元素的右上角

看起来像，

如何修复它？

Answer 1

让我们假设父元素的高度为x。因为，您使用::before元素通过将箭头旋转到45deg来显示箭头，所以箭头的对角线应该等于父元素的高度。对角线的公式为side * sqrt(2)。所以，

    x = side * sqrt(2)

=>  side = x / sqrt(2)

假设x = 50，则side将为35.35534。所以，在你的小提琴中应用同样的东西：

div {
    width: 100px;
    height: 50px;
    background: tomato;
    position: relative;
}

div::before {
    content: "";
    display: block;
    width: 35.35534px;
    height: 35.35534px;
    background: blue;
    position: absolute;
    transform: rotate(45deg);
    transform-origin: 0 0;
    left: 100%;
}

更好的方法是使用像SASS这样的css预处理器。这是我使用sass获取结果的代码。

<强> Working Fiddle