“切”后旋转的div？

Question

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

但它包含的图像：

和常规股利的权利。 （里面有文字）

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

我已经成功通过创建一个简单的div做here并旋转：

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

，其结果是：

但是（这是我的问题） - 我可以删除旋转的div的右侧部分，因此我将只有：

可能吗？

p.s. - 我知道thtat我可以通过使用另一个相对/绝对位置的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; 
}