css - 伪元素using::before overflow的父元素高度

Question

Plunker 代码是 here .

我尝试创建一个对话泡泡，其顶 Angular 和底 Angular 与父元素的 Angular 相同。

伪元素 Prop 是，

.callout::before {
      box-sizing: border-box;
      height: 100%;
      content: "";
      position: absolute;
      right: -0.2em;
      padding: 1em;
      background: inherit;
      border: inherit;
      border-right: 0;
      border-bottom: 0;
      transform: rotate(45deg);
      z-index: -1;
    }

我认为问题是，

1) 伪元素没有裁剪到父元素的高度

2) 伪元素不完全来自父元素的右上角

看起来像，

如何解决？

Answer 1

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

    x = side * sqrt(2)

=>  side = x / sqrt(2)

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

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