轮换后“切”一个div？

Question

我创建了一个消息工具提示：

但它包含以下图像：

和右边的常规div。 （内有文字）

但是，我不喜欢用图像来做。我想用旋转的div创建三角形部分。

我设法通过创建一个简单的div并旋转它来实现here：

   transform: rotate(45deg);
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Safari and Chrome */

结果是：

然而（这是我的问题） - 我可以删除旋转div的右侧部分，所以我只会：

有可能吗？

P.S。 - 我知道我可以通过使用另一个具有位置相对/绝对的div来隐藏正确的div部分。但我想知道是否有一个解决方案，删除正确的部分。 （或者，是否有任何代码可以创建三角形？）。还假设角度为90度。就像在红色div。

Answer 1

您可以在不旋转元素的情况下执行此操作，将其包含在位置相对元素内，并使用绝对位置将其设置为正确

Demo

.left {
    width: 0; 
    height: 0; 
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right:10px solid #001744; 
}