html - 旋转后“剪切”一个div？

Question

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

但它由以下图像组成：

以及右侧的常规 div。（里面有文字）

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

我已经 通过创建一个简单的 div 并旋转它来做到这一点：

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

结果是：

但是（这是我的问题）——我可以删除旋转 div 的右侧部分吗，所以我只有：

可能吗 ？

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

Answer 1

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

演示

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